Ajax calls loop delay or limit [duplicate]

I have a small Ajax function on my site, which makes the same thing for all list elements which are loaded. My problem is, that the list sometimes has 100+ elements and if it makes the Ajax calls I get ERROR 503, so it’s overloading the server. I just want that let’s say 5 calls are fired parallel or at least make some delay between the calls… I’m not a JS expert, I tried with this after Googling but it’s not right, I got “Unexpected identifier: sleep” error…

async function sleep(ms) { 
    return new Promise(resolve => setTimeout(resolve, ms)); 
}

function genContentSecondStep(){
    var list = document.getElementById("mylist").value;
    
    var splitList = list.split(";");
    for(var element of splitList){
        var trimStr = element.trim();
        if(trimStr != ""){
            callApi('gen-content', trimStr);
            await sleep(1000);
        }
    }
}

function callApi(input, element = null) {
    var prm = "";
    var content = document.getElementById("generatedContent").value;

    if (prm.length == 0 && input == 'generate-list') { 
        document.getElementById("generatedContent").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("generatedContent").innerHTML += this.responseText;
            }
        };

        xmlhttp.open("GET", "api-call.php?func=" + input + "&prm=" + element + "&content=" + content, true);
        
        xmlhttp.send();
    }
}

How to make this? Is it even possible? Thanks.

EDIT.: the api-call.php is working fine and if I limit the list to a few elements or I execute the previous faulty ones after a while it’s also okay, so the amount of Ajax calls is sadly the problem for the server.

EDIT2.: “thanks” for the duplicate, but it’s not even sure, that the await solves the problem, that was ONE of my first ideas only