JSFiddle - React, Tailwind, and code Playground

HTML

<div class='group'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

.group > span{
    width:50px; height:24px;
    background:green;
    display:block;
}
.group > span.selected{background:red;}

JavaScript

$('.group').click(function(){
        var $selected = $(this)
            .children('.selected')
            .removeClass('selected')

            if ($selected.length == 0 || $selected.next().length == 0){
                $(this).children('span:eq(0)').addClass('selected');
            }else{
                $selected.next().addClass('selected');
            }
});