JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<ul id="original">
    <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
        <li>eight</li>
        <li>nine</li>
        <li>ten</li>
</ul>
<ul id="accepted">
</ul>
<ul id="rejected">
</ul>

CSS

#accepted li{
    color:green;
}
#rejected li{
    color: red;
}

JavaScript

(function() {

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function makeServiceCall($this) {
        return $.Deferred(function(def) {

            var timeout = getRandomInt(1000, 5000);

            setTimeout(function() {

                var n = getRandomInt(0, 11);


                if (n % 2 == 0) {
                    def.resolve($this);
                }
                else {
                    def.reject($this);
                }


            }, timeout);

        }).promise();
    }

    $("#original > li").each(function() {

        var $this = $(this);

        makeServiceCall($this).then(function(elem) {
            elem.appendTo("#accepted");
        }, function(elem) {
            elem.appendTo("#rejected");
        });

    });

    alert("Finished Processing all items");

}());