JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tester" id="t1"></div>
<div class="tester" id="t2"></div>

<div id="myQueue"></div>

CSS

.tester {
        background:red;
        width: 100px;
        height: 100px;
        left: 400px;
        top: 300px;
        position: absolute;
    }

    .counter {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        font-size: 18px;
    }

JavaScript

$(function(){
        
        $('#myQueue')
            .queue('myQueue',function(next){
                $('#t1').animate({left: 100}, 
                                {duration: 1000, 
                                 queue: false,
                                 complete: next
                                })
            })
            .queue('myQueue',function(next){
                $('#t2').animate({left: 100}, 
                                {duration:1000, 
                                 queue:false,
                                 complete: next})
            })
            .queue('myQueue',function(next){
                $('#t1').animate({left: 600}, 
                                 {duration:1000, 
                                  queue:false,
                                  complete: next})
            })
            .queue('myQueue',function(next){
                $('#t2').animate({left: 600}, 
                                 {duration:1000, 
                                  queue:false,
                                  complete: next})
            })
            .dequeue('myQueue')
    })