My functions are not showing in the correct order, so to speak, I tried with jQuery timeout but not with success so far

Question

My functions are not showing in the correct order, so to speak, I tried with jQuery timeout but not with success so far

I am developing a SharePoint Hosted add-in that communicates with a list that lives in a web application using REST. I am using CRUD operations and have a form on a full page app page that works great, users can post text, dates, etc. On the list. I also have an admin interface so users can update items in the list as well as delete them. So far so good.

In this add-in, users can also submit a file (attachment) directly from the form along with the other column data, but the problem I'm facing now is that the attachment function only works "for a while". Sometimes it works great, but sometimes it doesn't work.

Mistake. {"error": {"code": "- 2147024809, System.ArgumentException", "message": {"lang": "en-US", "value": "Item does not exist. It may have been deleted by another user . " }}}

My guess is that my functions are not showing in the correct order, so I tried with jQuery timeout but still had no success. If I debug the chrome dev toolbar it works fine when I run everything "line by line", not sure what to do about it. If you don't have a solution in code, that's okay, but what I'm looking for are ideas that can lead me forward. I Great if anyone has any hints.

<body>
<button type="submit" class="btn btn-primary"  id="fileFormSubmit" 
onclick="AddAttachments();">  Submit </button>
</body>``

<scripy>
var id;
var idArray = [];
var tableContent;
$(document).ready(function () {
getCurrentGroupId();

$('#fileFormSubmit').click(function (e) {

    e.preventDefault();

    //Check for edit or new and call update or add function
    if ($('#myModalLabel').html() === 'Add New Item') {
        addFile($('#purpose').val(), $('#comments').val());
    } else {
        //edit knapp i varje rad
        UpdateFiles($('#fileId').val());
    }

    $('#fileFormSubmit').prop('disabled', true);

    AddAttachments();
});

});

function GenerateTableFromJson(objArray) {

var tableContent =
    '<table id="FilesTable" class="table table-striped table-bordered" 
cellspacing="0" width="100%">' +
    '<thead><tr>' + '<th>ID</th>'  + '<th>Purpose</th>' + 
'<th>Comments</th>' + '<th>Actions</th>' + '</tr></thead>';
for (var i = 0; i < objArray.length; i++) {
    tableContent += '<tr>';
    tableContent += '<td>' + objArray[i].Id + '</td>';
    tableContent += '<td>' + objArray[i].Purpose + '</td>';
    tableContent += '<td>' + objArray[i].Comments + '</td>';
    tableContent += "<td><a id='" + objArray[i].Id + "' href='#' 
style='color: orange' class='confirmEditFileLink'>" +
        "<i class='glyphicon glyphicon-pencil' title='Edit Item'></i>
</a>&nbsp&nbsp";
    tableContent += "<a id='" + objArray[i].Id + "' href='#' style='color: 
red' class='confirmDeleteFileLink'>" +
        "<i class='glyphicon glyphicon-remove' title='Delete File'></i>
</a>&nbsp&nbsp";
    tableContent += "<a id='" + objArray[i].Id + "' href='#' 
class='confirmListItemDetailsLink'>" +
        "<i class='glyphicon glyphicon-cog' title='Link to List Item'></i>
</a></td>";
    tableContent += '</tr>';
    idArray.push(objArray[i].Id);
}
getlastelementofarray();
return tableContent;
};
function getlastelementofarray() {
return (idArray[idArray.length-1]);
}

var fileInput = document.getElementById("GenerateTableFromJson");
function AddAttachments() {

var aId = getlastelementofarray();
var fId = 1;
if (aId === undefined) {
    aId = fId
} else {
    aId = aId + 1
}
console.log(aId);
var digest = "";

$.ajax(
    {
        url: "../_api/contextinfo",
        method: "POST",

        headers: {
            "ACCEPT": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose"
        },
        error: function (data) {

        },
        success: function (data) {
            digest = data.d.GetContextWebInformation.FormDigestValue;

        },


    }).done(function () {
        var fileInput = $('#attachments');
        var fileName = fileInput[0].files[0].name;
        var reader = new FileReader();
        reader.onload = function (e) {
            var fileData = e.target.result;
            var res11 = $.ajax(
                {
                    url: 
"../_api/web/lists/getbytitle('ExpenseList')/items(" + aId + 
")/AttachmentFiles/add(FileName='" + fileName + "')",
            method: "POST",
            Attachments: true,
            binaryStringRequestBody: true,
            data: fileData,
            processData: false,
            headers: {
            "ACCEPT": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            //"X-RequestDigest": digest,        //or use this in the headers
            "content-length": fileData.byteLength
                    },

                    success: function (data) {
                        location.reload();
                    },

                    error: function (data) {
                        console.log("Error occured." + data.responseText);
                        //alert("Error occured." + data.responseText);
                    }
                });
        };
        reader.readAsArrayBuffer(fileInput[0].files[0]);

    });

}
</scripy>