JSFiddle - React, Tailwind, and code Playground

by Nikita

HTML

<div id="statuses"> <a id="first" class="status">Waiting</a>
 <a id="second" class="status">Waiting</a>
 <a id="third" class="status">Waiting</a>
 <a id="fourth" class="status">Waiting</a>

 <!--
 <a id="fifth" class="status">Waiting</a>
 <a id="sixth" class="status">Waiting</a>
 <a id="seventh" class="status">Waiting</a>
 <a id="eighth" class="status">Waiting</a>
 -->
</div>

CSS

div#statuses {
    width: 90px;
}

a.status {
    background-color: #ff0;
    cursor: pointer;
    padding: 5px 10px;
    margin: 5px 0;
    border-radius: 5px;
    border: 2px solid #777;
    display:block;
    text-align: center;
}

a.status.selected {
    background-color: #0f0;
    border: 2px solid #ccc;
}

JavaScript

$(document).on("click", ".status", function (e) {
    var $this = $(this);
    $this.toggleClass("selected");

    var isSelected = $this.hasClass("selected");
    $this.html(isSelected ? "Ready" : "Waiting");
    serialize();
});