Webservice aufrufende HTML Seite zeigt manchmal erst nach 2mal aktualisieren Daten an!

[hmm]

Hallo und Herzlich Willkommen zu dem hmm seinen merkwürdigen Problemen!

Wenn ich meine HTML Seite im Browser starte wird folgender Code ausgeführt:

var i = 1;
            
$.ajax({
    url : "/getSkillData",
    dataType: "JSON",
    type: "GET",
    success: function (data) {
        for(var j = 0; j < data.length; j++) {
            addTableRowParam(data[j].mitarbeiter_id, data[j].name, data[j].skill, data[j].subskill, data[j].nivau);
        }
        addTableRowParam("", "", "", "", "");
    }
});
            
$(document).ready(function () {
    $('.addBtn').on('click', function () {
        addTableRow();
    });
            
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
            
});

function addTableRowParam(mitarbeiter_id, name, skill, subskill, nivau) {
    var nr = i;
    var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + name + '" id="name_' + nr + '" class="form-control"/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" /><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" /></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td></tr>');
    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}
            
function addTableRow() {
    var tempTr = $('<tr><td><input type="number" id="mid_' + i + '" class="form-control" disabled/></td><td><input type="text" id="name_' + i + '" class="form-control"/></td><td><input type="text" id="skill_' + i + '" class="form-control" /><td><input type="text" id="subskill_' + i + '" class="form-control" /></td><td><input type="number" id="nivau_' + i + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td></tr>');
    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}

Leider muss ich diese HTML Seite teilweise zweimal laden bis auch tatsächlich Daten angezeigt werden. Wie mache ich, dass die Daten immer nach nur einmal laden angezeigt werden?

Der Webservice "/getSkillData" läd mir die Daten immer, also muss ich irgendwas bei dem ajax zeugs vermorkst haben, oder?