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"/>

CSS

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

JavaScript

$(document).ready(function(){    

    var current = 0;
    var total = 3;
    
    $('#next').click(function(){
        if(current < total)
        {
            current++;
            highlight();
        }
    });
    
    $('#previous').click(function(){
        if(current > 1)
        {
            current--;
            highlight();
        }                
    });    
    
    function highlight(){
        switch(current){
            case 1:
                $('#one').css('background-color', 'rgba(255,0,0,1)');
                $('#two').css('background-color', 'rgba(255,0,0,0)');
                $('#three').css('background-color', 'rgba(255,0,0,0)');
                break;
            case 2:
                $('#one').css('background-color', 'rgba(255,0,0,0)');                
                $('#two').css('background-color', 'rgba(255,0,0,1)');
                $('#three').css('background-color', 'rgba(255,0,0,0)');                
                break;                
            case 3:
                $('#one').css('background-color', 'rgba(255,0,0,0)');
                $('#two').css('background-color', 'rgba(255,0,0,0)');
                $('#three').css('background-color', 'rgba(255,0,0,1)');                
                break;           
        }        
    }
});