JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent"><ol>
                            <li>1111111</li>
                            <li>222222222222</li>
                            <li>333333333333</li>
                            <li>4444444444444444</li>
                            <li>555555555555</li>
                            <li>6666666666</li><li>777777777777</li>
                            <li>8888888888</li>
                            <li>9999999999</li>
                            <li>10</li>
                    </ol></div>
    </body>

CSS

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

}

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

JavaScript

$(".parent").click(function() {
                        lis=$(this).find('li');
                        
                        i=-1;
                        
                    inter= setInterval(function(){ 
                         if(i<lis.length-1) {
                         i++;
                         $(lis[i-1]).removeClass('change');    
                         $(lis[i]).addClass('change');
                             console.log($(lis[i]).text()+'_________________'+i);
                         }
                        else {
                           
                            console.log('end');
                             $(lis[i]).removeClass('change');
                             clearInterval(inter);
                        }
                         
                        }, 1000);
                         
                       
                   
                       
                     
                        

                          
                            });