JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Click me!</a>
<div></div>

JavaScript

function callBackend(count) {

  var deferred = $.Deferred();

  setTimeout(function() {
    $("div").append("<p>" + count + "</p>");
    deferred.resolve();
  }, 50);

  return deferred.promise();
}

$(function() {

  $("a").click(function() {

    var promises = [];

    for (i = 1; i <= 10; i++) {
      var deferred = $.Deferred();
      callBackend(i).then(function() {
        deferred.resolve();
      });

      promises.push(deferred.promise());
    }

    $.when.apply($, promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});