JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="info"></div>

CSS

div {
    width: 40px;
    height: 40px; 
    position: absolute;
}

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
    left: 45px;
}
#div3 {
    background-color: blue;
    left: 90px;
}

#info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
}

JavaScript

window.addCallListener = function(func, callback){
        var callNumber = 0;
        return function(){
            var args = [].slice.call(arguments);
            var result;
            try {
                result = func.apply(this, arguments);
                callNumber++;
            } catch (e) {
                callback(e, args, this, callNumber);
                throw e;
            }
            callback(result, args, this, callNumber);
            return result;                 
        }
    }
    
    
    $.fn.animate = addCallListener($.fn.animate, function(result, args, self, callNumber){
        console.log('$.fn.animate has been called. \n\
            Result is ', result,  '.\n\
            Arguments are', args, '.\n \
            Self is ', self, '. \n\
            Number of calls ', callNumber, '.'
        );
    });
    
    $(function(){
         $('#div1').animate({
            top: 30
        }, 1000);
        
         $('#div2').animate({
            top: 50
        }, 1000);
        
         $('#div3').animate({
            left: 50
        }, 1000);
    })