JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
   Element with no secondary identifier.
</div>
<div class="a b">
    Element with secondary identifier, "B".
</div>

CSS

.a{
  position:absolute;
  top:0px;
  left:0px;
  width:325px;
  height:25px;    
}
.b{
  position:absolute;
  top:50px;
  left:50px;
  width:325px;
  height:25px;    
}

JavaScript

$('.a').animate({
  //This fires immediately
  left:"+=50px"     
}, function(){
  //This fires once the above has been completed.
  //we also don't want the animation to fire on some eleents.
  $('.a').animate({
    left:"-=50px"
  }, function(){
    $('.b').animate({
      //even though we stop it below AND clearQueue..
      //this will still run in the callback.
      left:"-=75px",
      top:"+=150px"
    }, function(){
       //and then send it back..
      $(this).animate({
        left:"-=25px",
        top:"-=150px"  
      });           
    });              
  });
  //This will only stop the initial animate function
  //The function in the callback will fire once it has completed.
  $('.b').stop(true);
});