JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li id="one">roma</li>
    <li id="two">milan</li>
    <li id="three">napoli</li>
</ol>

<input id="previous" type="button" value="previous"/>
<input id="next" type="button" value="next"/>


<script type="text/javascript">
    
    document.getElementById('next').addEventListener("click", next, false);    
    document.getElementById('previous').addEventListener("click", previous, false);
    
    var current = 0;
    var total = 3;
       
    function next(){
        if(current < total){
            current++;
            highlight();
        }
    };    
    
    function previous(){
        if(current > 1)
        {
            current--;
            highlight();
        }                
    };    
    
    function highlight(){
        switch(current){
            case 1:
                document.getElementById('one').style.backgroundColor='rgba(255,0,0,1)';
                document.getElementById('two').style.backgroundColor='rgba(255,0,0,0)';
                document.getElementById('three').style.backgroundColor='rgba(255,0,0,0)';    
                break;
            case 2:
                document.getElementById('one').style.backgroundColor='rgba(255,0,0,0)';
                document.getElementById('two').style.backgroundColor='rgba(255,0,0,1)';
                document.getElementById('three').style.backgroundColor='rgba(255,0,0,0)';                  
                break;                
            case 3:
                document.getElementById('one').style.backgroundColor='rgba(255,0,0,0)';
                document.getElementById('two').style.backgroundColor='rgba(255,0,0,0)';
                document.getElementById('three').style.backgroundColor='rgba(255,0,0,1)';              
                break;           
        }        
    }
</script>

CSS

.toggle{
    display: block; 
    padding: 10px;    
    width: 200px;
}