JSFiddle - React, Tailwind, and code Playground

by Abra Cadabra

HTML

<div class="container">
    <button id="clicker">click me</button>
    <div id="output" class="outputs">0</div>
    <div id="output2" class="outputs">0</div>
    <div id="output3" class="outputs">0</div>
    <div id="output4" class="outputs">0</div>
</div>

CSS

.container {
    overflow: hidden;
}
#clicker {
    display: block;
    padding: 20px 40px;
    font-size: 2.4em;
    cursor: pointer;
}
.outputs {
    float: left;
    margin-top: 25px;
    margin-right: 25px;
    color: red;
    width: 200px;
    padding: 30px;
    border: 2px solid black;
    font-size: 3em;
    text-align: center;
    vertical-align: middle;
}
.non-blocking-proof {
    margin-top: 321px;
    padding: 5px 0;
    width: 549px;
    font-size: 1.5em;
    text-align: center;
    border: 2px solid yellowgreen;
    clear: both;
}

JavaScript

// caching the output pane
var outputPanes = $(".outputs");

// storing the server-fetched likes
var numberOfLikes = [23, 44, 60, 96];

$("#clicker").on('click', function (e) {
    var delay = 25;

    // this loop generates the other loops, handling the timeouts,
    // transitions and the eventual UI update
    for (var z = 0; z < numberOfLikes.length; z++) {
        setTimeout(
        (function (v) {
            for (var i = 1; i <= numberOfLikes[z]; i++) {
                setTimeout(
                (function (s) {
                    return function () {
                        $(outputPanes[v]).text(s);
                    }
                })(i), delay * i);
            }
        })(z), 1);
    };

    $('.container').append("<div class='non-blocking-proof'>Proof it's non-blocking</div>");
});