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;
}

JavaScript

$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==11){ 
                strtemp=str1;clearInterval(refreshID);
        		$(strtemp).removeClass("change");
            }
            i++;
        }, 100);
    });
});