JSFiddle - React, Tailwind, and code Playground

HTML

<h3>A Series of Asynchronous Ajax calls!</h3>
<div class="document"></div>

JavaScript

var calls = function(val) { $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is '+val+' iteration.</p>',
                delay: 1
            },
            dataType: 'html',
            beforeSend: function() {
                console.log('Fired prior to the request');
            },
            success: function(data) {
                console.log('Fired when the request is successfull');
                $('.document').append(data);
            },
            complete: function() {
                console.log('Fired when the request is complete');
            }
        });
    };
	
	(function def() {
		var def = (new $.Deferred()).resolve();
		var list = new Array(15);
		$.each(list, function (index, val) {
			def = def.pipe(function () {				
				return calls(index);
			});
		});
	})();