JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="foo"></ul>

CSS

ul li {
    padding: 6px;
    font: italic 18px Times, Arial, Serif;
    margin-left: 8px;
    list-style: circle outside none;
}

li.last {
    margin-top: 22px;
    background-color: green;
    font-size: 28px;
}

JavaScript

function createPromise( baseInfoTemplate ) {
    var baseData = { /* foobar */ };

    return $.Deferred(function( promise ) {
        setTimeout(function() {
            $('#foo').append('<li>' + baseInfoTemplate + ' --> success</li>');
            promise.resolve();
        }, ~~(Math.random() * 8000));
    }).promise();
}

var myPromises = [ ];

myPromises.push( createPromise( 'some data' ) );
myPromises.push( createPromise( 'even moar data' ) );
myPromises.push( createPromise( 'foo bar heay' ) );
myPromises.push( createPromise( 'hey yooo' ) );
myPromises.push( createPromise( 'who wants some?' ) );

$.when.apply( null, myPromises ).done( function() {
    $('#foo').append('<li class="last">all done!</li>');
});