JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <ol>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
        <li>AAAAA</li>
    </ol>
</div>

CSS

.parent{
    background-color: yellow;
    height:200px;
    width:400px;    
}

.change{
    border: 1px dotted green;
    background-color: red;
    height:15px;
    width:100px;
}
.normal{
    background:transparent;
}

JavaScript

$(document).ready(function(){
    $(".parent").click(function(){
      	items = $(this).find('li');
        i = -1;
		len = items.length; 
		function animation_loop() {
                $(items[i]).addClass('change');
                setTimeout(function(){ 
                $(items[i]).removeClass('change');
                }, 100  );
			setTimeout(function() { 
                if (i < len) 
            {
                i++;
                animation_loop(); 
              
            } 
          
        }, 100);
		};
		animation_loop();
    });
});