JSFiddle - React, Tailwind, and code Playground

by prasad parab

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

var index=1;
var curretInterval;
$(".parent").click(function(){
    clearInterval(curretInterval);
 	curretInterval=setInterval(function(){
    	$("ol li:nth-child("+(index-1)+")").removeClass("change");
        $("ol li:nth-child("+index+")").addClass("change");
       
        if(index>10){
        	index=1;
            $("ol li:nth-child(10)").removeClass("change");
            clearInterval(curretInterval);
        }else{
        	 index=index+1;
        }
    },1000);
     
 });