Font awesome icon showing only in debug mode

Question

I am trying to show a spinner FA icon before ajax call submission and a correct/wrong FA icon on ajax completion, but the icons only change when the whole function gets over. It works perfectly on debugging mode but changes the classes only after the click function gets over.

$('#submitModal').click(function () {           
        for (var i = 0; i < arrInvoices.length; i++) {

            //wait(3000);  //1 seconds in milliseconds
            $.ajax({
                type: "POST",
                url: applicationBaseUrl + "/Home/GenerateActivity",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,                
                beforeSend: function () {
                    debugger;
                    addClassInModal(i, 'fas fa-spinner fa-pulse');

                },
                success: function (data) {
                    //alert(data);
                    debugger;

                },
                error: function (data) {
                    debugger;
                    //alert(data);
                },
                complete: function () {
                    debugger;
                    //wait(3000);  //1 seconds in milliseconds
                    if (i % 2 == 0) {
                        //success
                        //$("#List_Header_" + i).css({ "background": "green", "color": "white" });
                        $("#List_Icon_" + i).css({ "color": "green" });

                        //$("#List_Icon_" + i).removeClass('fa-spinner fa-pulse');
                        removeClassInModal(i, 'fa-spinner fa-pulse')

                        //$("#List_Icon_" + i).addClass('fa-check-circle');
                        addClassInModal(i, 'fa-check-circle')
                    }
                    else {                        
                        //error
                        //$("#List_Header_" + i).css({ "background": "red", "color": "white" });
                        $("#List_Icon_" + i).css({ "color": "red" });

                        //$("#List_Icon_" + i).removeClass('fa-spinner fa-pulse');
                        removeClassInModal(i, 'fa-spinner fa-pulse')
                        //$("#List_Icon_" + i).addClass('fa-times-circle');
                        addClassInModal(i, 'fa-times-circle')
                    }
                },               
            });

            //alert("out");

            reloadFlag = true;

        }
    });