JSFiddle - React, Tailwind, and code Playground

HTML

<div id="light">
    <div id="red" class="on" data-val="0"></div>
    <div id="yellow" data-val="1"></div>
    <div id="green" data-val="2"></div>
</div>

CSS

#light{
    height: 300px;
    width: 100px;
    padding: 10px;
    background-color: #1a1a1a;
}

#light div{
    height:80px;
    width:80px;
    border-radius: 40px;
    margin: 10px;
    opacity: 0.3;
}

#light div.on{
    opacity: 1;
}

#red{
    background-color: #E81321;
}

#yellow{
    background-color: #E1E813;
}

#green{
    background-color: #13E816;
}

JavaScript

//ken wang
/** $.ajax({
    url: 'light/state',
    type: 'GET',
    onSuccess: function(response){
         //Assuming response comes in 'red', 'yellow', 'green'
        $("#" + response).addClass('on');
    },
    onError: function(response){
        
    }
}); **/

$("#light").click(function(){
   toggleLight(); 
});

function toggleLight(){
    //Find the light that is currently on, turn that light off
    //And then turn the next sibling on
    var onLight = $(".on").removeClass('on');
    var currentLightIndex = onLight.attr('data-val');
    var indexOfNextSibling = (currentLightIndex+2)%3;    
    var siblings = onLight.parent().children();
    $(siblings[indexOfNextSibling]).addClass('on');
    /*
    var siblings = onLight.parent().children();
    for(var i = 0, len = siblings.length; i < len; i++){
        if(siblings[i] === onLight[0]){
            //0 -> 2
            //1 -> 0
            //2 -> 1
            var indexOfNextSibling = (i+2)%3;
            console.log("on index: " + i + "|next: " + indexOfNextSibling); 
            $(siblings[indexOfNextSibling]).addClass('on');
            break;
        }
    }
    */
}