javascript - Tracking multiple jquery ajax API requests with progress bar

Question

I have an increment that takes the ids and add them to url to make multiple ajax requests.
js:

for (x = 1; x <= val['id_count']; x++) {
 $.ajax({
    url: baseUrl + x,
    dataType: "json",
    success: function(results, status, xhr) {
   },
    error: function(xhr, status, error) {
    $("#message").html("data: " + status + " " + error)
   }
 })
}

HTML

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

what i trying to do here is to count the ids (urls) and show the progress of requests is progress bar and see what percent is complete and what percent is left. also how many total ids is there and how many request is completed from total.

in the other hand this is what i want to do for example:

what i have done so far:

for (x = 1; x <= val['id_count']; x++) {
 totalIDs = 0;
 totalIDs = x.length;
 $.ajax({
    url: baseUrl + x,
    dataType: "json",
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.onreadystatechange = function() {
      var progress = x / totalIDs * 100;
      $(".progress-bar").css({
          "width": progress + "%"
        });
      }
     return xhr;
    },
    success: function(results, status, xhr) {
    },
    error: function(xhr, status, error) {
    $("#message").html("data: " + status + " " + error)
   }
 })
}

ps: new to this

question from:https://stackoverflow.com/questions/65919758/tracking-multiple-jquery-ajax-api-requests-with-progress-bar

Answer 1

for (x = 1; x <= val['id_count']; x++) {
 $.ajax({
    url: baseUrl + x,
    dataType: "json",
    success: function(results, status, xhr) {
       if (inprogress < total_urls) {
         inprogress++;
         $("#tProgress").html(inprogress + ' / ' + total_urls + ' ?');
         progress = Math.round(inprogress / total_urls * 100);
         $("#progress-bar").css({
            "width": progress + "%"
         });
         $("#progress-bar").html(progress + '%');
       }
    },
    error: function(xhr, status, error) {
    $("#message").html("data: " + status + " " + error)
   }
 })
}