I have a long executing PHP script, which generates some files. The total amount of files is known.
When clicking on a button i want to create a progress bar of the amount of files created.
The problem is, the bar only progresses once when the long execution finishes, and fills it completely rather than step by step based on the amount of files in a certain directory. I am not sure if either the JS async call is wrong or if there is some problem with async PHP executions. The scripts themselve work properly when executed one after another.
Any help is appreciated!

html:

```
<td class="Aktion">
  <div class="Aktion-Text">Generieren</div>
  <div class="Aktion-Ladebalken">
    <div class="Aktion-Ladebalken-filler"></div>
    <div class="Aktion-Ladebalken-Text"></div>
  </div>
  <input type="hidden" class="VSMon" value="1"/>
  <input type="hidden" class="VSJahr" value="21"/>
</td>

```

PHP code for counting files:

```
chdir("../pdfgenerierung/rechnungen");
$anz = (glob("Rechnung_".date("ym",strtotime($VerrechnungsMonat))."*"));
chdir("../../arbeitsplan");
echo count($anz);

```

this is my JS code:
Note that I´ve built in a total of 5 executions to not get stuck into an endless loop.

```
$(document).ready(function(){
    $(".Aktion").on("click",async function(){
        var vsmon = $(this).find(".VSMon").val();
        var vsjahr = $(this).find(".VSJahr").val();
        $(this).removeClass("Aktion"); //Prevent multiple execution
        element = $(this);

        $.ajax({
            //Gets the total amount of files, works properly
            url:"rgAnzahlBerechner.php?type=gesamt&VSMon="+vsmon+"&VSJahr="+vsjahr,
            dataType:"text",
            async:true,
            success:function(daten){
                var PatientenAnzahl = daten;
                $(element).find(".Aktion-Text").remove();
                $(element).find(".Aktion-Ladebalken").css({"height":"20px"});
                $(element).find(".Aktion-Ladebalken").css({"border-width":"2px"});
                $(element).find(".Aktion-Ladebalken-Text").html("0/"+PatientenAnzahl);

                //Call to the long executing script, works properly aswell
                $.ajax({
                    url:"../lfdverrechnung.php?VSMon="+vsmon+"&VSJahr="+vsjahr,
                    async:true,
                    success:function(){
                        console.log("Rechnungen erstellt");
                    }
                });

                temp(vsmon,vsjahr,element,PatientenAnzahl);
            }
        });
    });
});
async function temp(vsmon,vsjahr,element,PatientenAnzahl){

    var i=0;
    while(i<5)
    {
        setTimeout(function(){
            //PHP script which should return amount of files created
            $.ajax({
                url:"rgAnzahlBerechner.php?type=teil&VSMon="+vsmon+"&VSJahr="+vsjahr,
                dataType:"text",
                async:true,
                success:function(daten){
                    var new_width = (daten/PatientenAnzahl) * 200;
                    new_width = Math.round(new_width);
                    console.log(new_width);
                    $(element).find(".Aktion-Ladebalken-filler").css({"width":new_width+"px"});
                    $(element).find(".Aktion-Ladebalken-Text").html(daten+"/"+PatientenAnzahl);
                    if(daten == PatientenAnzahl)
                    {
                        $(element).find(".Aktion-Ladebalken-Text").html("Fertig!");
                        return;
                    }
                }
            });
        i++;
        },500);
    }
}

```