JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <button>CLICK</button>

    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>

</div>

CSS

.circle{
    width: 40px;
    height: 40px;
    position: absolute;
    background: red;
    border-radius: 100%;
}

.circle-1{ top: 10em; left: 10em; }

.circle-2{ top: 20em; left: 20em; }

.circle-3{ top: 30em; left: 30em; }

.circle-4{ top: 40em; left: 40em; }

.circle-5{ top: 50em; left: 50em; }

button{ padding: 10px 50px; display: table; margin: auto; }

JavaScript

$(document).ready(function(){
    var $c = $(".circle");
    
    $("button").click(function(){
        
		$c.each(function(i, elem){
			$(elem).delay(i * 500).animate({top:"300em"}, { duration: 2000, complete: function(){
				//just something to do after the animation has been completed, you can disregaurd this area
				}
			});//animate end            
		});//each end 
        
        
    });
});