Complete function of AJAX request not behaving as expected

Question

I am working on a jquery/ajax project. On document ready, I have the following code:

 $(document).ready(function () {    
    $.ajax({
        url: '/Main/ReturnGroups/',
        dataType: "json",
        success: function (data) {
            $('.column').each(function (index) {
                let indexVar = index;
                let colID = $(this).attr("id");
                for (let i = 0; i < data.length; i++) {
                    if ($(this).attr("id") == data[i].ColumnID) {
                        let thisID = $(this).attr("id");
                        let thisGroupID = data[i].ID;
                        $.ajax({
                            url: '/Main/GetFullGroup/',
                            data: { groupID: thisGroupID },
                            success: function (html) {
                                $('#' + thisID).append(html);  //this html inserts a portlet (JqueryUI) based element
                            }                               
                        });
                    }                         
                }
            })              
        },
        complete: function () {
            alert($('.portlet').length); //returns 0 (leads me to believe its being run before success function
            AddPageProperties(); //this function is supposed to add a bunch of classes to the elements injected in the success function but doesnt actually add the classes when its here
        }
    });
})

It seems to me that the contents of the complete: function is running asynchronously with the success function. From my understanding the purpose of the complete function is to run once the ajax success (or error) function is completely done.

The code is iterating all the columns and returning all the groups which have the same column id in my database, then passing the groupID to another webmethod which is then querying for all tasks and using the passed in groupID only pulling the tasks that are associated to the group, then using that data to inject a partial view to place the tasks/groups in their respective locations.

Things I've tried:

-Put the AddPageProperties() function in a button click, and after the ajax is finished, click the button. This works exactly as intended.

-use ajaxStop(). While this does work as I want for document ready, once I submit another ajax request it runs the function again, thus duplicating the code. My project uses ajax requests when elements are moved around the screen so this doesnt work.

-Try and get the details of an element to see if the html is even there in the first place when the complete: function() is run. The alert in the code snippet returns 0, which leads me to believe the HTML is not there when that alert is executed.

-using the index of the each function to determine the end of the iteration and then run the function, but again does not apply classes in the function. I tried to again do an alert to see if the elements are present, but they are not.

-set async to false, but the browser just says that its deprecated and it doesnt change any behavior

Any advice on the path towards a solution is appreciated. My goal is once all the HTML is injected, then and only then run this function and never again until page is reloaded sometime later.

I would like to stick with JQuery/ajax as my project is dependent on JQuery for Bootstrap.