JSFiddle - React, Tailwind, and code Playground

HTML

<div class="single-example">
</div>

<div class="multi-example" data-url="example-a">
</div>
<div class="multi-example" data-url="example-b">
</div>
<div class="multi-example" data-url="example-c">
</div>

JavaScript

(function() {
	"use strict";
    
	// You can pass a single url to be used on all matching elements
    // or you can pass a callback, which is called for each
    // element in the selector, which returns the url to use
    // for that element
    $.fn.loadPromise = function(urlOrCallback) {
        var promises = [];
        this.each(function(i, element) {
            var url,
                defer;

            if (typeof urlOrCallback === 'function')
                url = urlOrCallback.call(element, i, element, this);
            else
                url = urlOrCallback;

            if (url) {
                defer = $.Deferred();
                $(element).load(url, function(responseText, textStatus, xhr) {
                    defer.resolve({
                        element: element,
                        responseText: responseText,
                        textStatus: textStatus,
                        xhr: xhr
                    });
                });
                promises.push(defer.promise());
            }
        });
        return $.when.apply($, promises).then(function(/*...*/) {
        	return Array.prototype.slice.call(arguments);
        });
    };

    // Simple example:
    $('.single-example')
    .loadPromise('example-single')
    .then(function(result) {
        console.log('done load: ' + result[0]);
    });

    // Example with multiple
    $('.multi-example').loadPromise(function() {
        return $(this).attr('data-url');
    }).then(function(multi) {
        console.log('multi done', multi);
    });
}());