JSFiddle - React, Tailwind, and code Playground

HTML

<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
</div>
<div id='catchMe'>
    
</div>

CSS

.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}

JavaScript

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
    $.when( a ).done( myTest );
    $.when( a ).done(function(){ alert( 'all boxes moved down' ) });
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
    $.when( b ).done( c );
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
    $.when( c ).done( a );
}
function all(){
    $('.box1').animate({top: '100px'}, 2000),
    $('.box2').animate({top: '100px'}, 1000),
    $('.box3').animate({top: '100px'}, 2000);
}
   
var outerEye = 10;

function myTest () {

    if ( outerEye ) {
        alert("HERE");
        $("#catchMe").html(i);
       setTimeout( myTest, 1000 ); 
       outerEye--;
    } 
    
}


b();