JSFiddle - React, Tailwind, and code Playground

HTML

<span id="clickme">click me</span>
<div class="bar" id="a"></div>
<div class="bar" id="b"></div>
<div class="bar" id="c"></div>
<div class="bar" id="d"></div>

CSS

.bar {
 width:100px;
 height:10px;   
}

JavaScript

// init the document
$(".bar").each(function () {
    var hue = 'rgb(200,215,'+getRandomInt(0,255)+')';
    $(this).css("background-color", hue);
});

engine = new Engine(); 
    
$("#clickme").bind('click', function() {
    $(".bar").each(function() {
        engine.add();
        //pass anon function that calls oncomplete on the engine instance
        //you were a reference to the method, and lost the context
        $(this).animate({width:200}, getRandomInt(500, 3000), 
        function()
        {
            engine.oncomplete();
        });
    });
});

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

// animation engine
function Engine()
{   
    this.i = 0;
}
Engine.prototype.add = function()
{
        this.i++;
};
Engine.prototype.oncomplete = function()
{
        this.i--;
        if (this.i <= 0)
        {
            return this.finish();
        }
};
Engine.prototype.finish = function()
{
    alert('done');
};