JSFiddle - React, Tailwind, and code Playground

HTML

<p>Child 1</p>
<p>Child 2</p>
<p>Child 3</p>

CSS

.red {
    color:red;
}

.blue {
    color:blue;
}

JavaScript

(function($) {

    $.fn.cacheload = function (color, time, index) {
        var $this = this,
            $elem = $("<p>New child " + index + "</div>");
        
        $this.eq(-1).after($elem);

        $.ajax('/echo/html/', {
            type: 'post',
            dataType: 'html',
            data: {
                html: color,
                delay: time
            }
        }).done(function (html) {
            $elem.addClass(html);
        });
        return $this.add($elem);
    };

    $(document).ready(function() {
        var $entries = $('p');
        $entries = $entries.cacheload("red",.6,$entries.length+1);
        $entries = $entries.cacheload("blue",0.2,$entries.length+1);
    });

})(jQuery);