JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
</div>

CSS

div.fl {
    float: left;
    width: 50px;
    padding: 4px;
    margin: 2px;
    border: 1px solid gray;
    cursor: pointer;
    text-align: center;
}
div.gr {
    background-color: green;
    color: white;
}
div.bl {
    background-color: blue;
    color: white;
}
div.re {
    background-color: red;
    color: white;
}

JavaScript

$(function() {
    var STAGE_INDEX_NAME = "stageId";
    var stages = [
        {text: "Empty", class: ""},
        {text: "Green", class: "gr"},
        {text: "Blue", class: "bl"},
        {text: "Red", class: "re"}
    ];
    
    $("#container div.fl").prop(STAGE_INDEX_NAME, 1)
    .text(stages[0].text);
    
    $("#container").on('click', 'div.fl', function(evt) {
        var index = $(this).prop(STAGE_INDEX_NAME);
        if ( index == stages.length ) {
            $(this).hide('slowest'); //.remove();
            $('<div></div>')
            .addClass('fl')
            .text(stages[0].text)
            .prop(STAGE_INDEX_NAME, 1)
            .appendTo("#container");
        } else {
            $(this).removeClass(stages[index-1].class);
            $(this).addClass(stages[index].class)
            .prop(STAGE_INDEX_NAME, index+1)
            .text(stages[index].text);
        }
    });
});