JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="Score">0</div>

CSS

div {
    color: #fff;
    padding:5px;
}
#box1 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:red;
    left:100px;
    border-radius:50px;
    cursor:pointer;
    background-repeat:no-repeat;
}
#box2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    left:200px;
    border-radius:50px;
    cursor:pointer;
    background-repeat:no-repeat;
}
#box3 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:yellow;
    left:300px;
    border-radius:50px;
    cursor:pointer;
    background-repeat:no-repeat;
}
#Score {
    width:50px;
    height:50px;
    float:right;
    background-color:blue;
}

JavaScript

var s = 0;
var pos = $('#box1').position().bottom;
$('#box1').click(function () {
    s = s + 10;
    $('#Score').text(s);
    $('#box1').hide();

});
$('#box2').click(function () {
    s = s - 10;
    $('#Score').text(s);

});
$('#box3').click(function () {
    s = s - 10;
    $('#Score').text(s);

});


function loop() {
    //moving first div from left to right 

    $('#box1').css({

        bottom: 0
    });
    $('#box2').css({

        bottom: 0
    });
    $('#box3').css({

        bottom: 0
    });

    $("#box1").animate({
        "bottom": "+=900"
    }, 12000, 'linear',

    function () {
        loop();
    })
    $("#box2").animate({
        "bottom": "+=500"
    }, 12000, 'linear',

    function () {
        loop();
    })
    $("#box3").animate({
        "bottom": "+=1000"
    }, 12000, 'linear',

    function () {
        loop();
    })
}
loop();