jQuery screen updates work in FF, not in IE, Chrome

Hi,
I'm not much of a front end developer and made up the following as I went along, but work in FF, and realized in IE and Chrome, the screen just "freeze".
However in FireFox, for each record that get processed , the progress bar update nicely and each row have a cell which I update with an icon.

Guess better to just post my code, hoping it make sense?

Oh, before this I build up a table of all records, give the first one a class name of "recordRow" and data-id of the record's id.
So the code loop over all records, and call a server side method that process the record and return a empty string (success) or error.
Note this all work in all browsers...it's just the screen seems to "freeze" (not updating the progress bar or anything)....Fine in Firefox..oh I said that...:sick: (late here)

HTML Code:

---

$('#btnImport').on('click', function(event) {
       
        event.preventDefault();
       
        var total = $('.recordRow').length;
        var current = 0;       
        $('#progressBarContainer').show();
       
        var url = '/Portal/Admin/MemberImport/ImportRecord';
       
        $('.recordRow').each(function() {
                var id = $(this).data("id");
                current++;
                $('#progressBar').width(current / total * 100 + '%');
                var cell = $(this);
                var row = cell.closest('tr');
                cell.html('<i class="icon icon-refresh"></i>');
                var model = {
                        Id: id
                };
                $.ajax({
                        url: url,
                        type: 'GET',
                        data: model,
                        dataType: 'json',
                        async: false
                }).done(function(data) {
                        if (data == '') {
                                cell.html('<i class="icon icon-ok"></i>');
                                $('#tblRecords tr[data-id="'+id+'"]').addClass('info');
                        } else {
                                cell.html('<a href="#" data-toggle="tooltip" data-placement="right"  class="tip" title="' + data + '"><i class="icon icon-remove"></i></a>');
                                row.addClass('error');
                        }
                        $('.tip').tooltip();
                });
        });
        $('#progressBarContainer').hide();
        alert("Import Complete. It would be best to delete the batch file now.");
});

---

UPDATE: I just realized if I add a .always to the ajax call and put an alert in there, IE show the alert and update the screen.
I tried set cache to false, but still no joy.

Sorry for the late response - did you get this working?

Are you able to use a debugger in IE or Chrome - you could set breakpoints and see what's going on in further detail