JSFiddle - React, Tailwind, and code Playground

by Tomalak

HTML

<ul>
    <li class="ui-datebox-griddate ui-btn-up-a">first</li>
    <li class="ui-datebox-griddate ui-btn-up-b">second</li>
    <li class="ui-datebox-griddate ui-btn-up-c">third</li>
</ul>

CSS

.ui-btn-up-a {
    color: red;
}
.ui-btn-up-b {
    color: green;
}
.ui-btn-up-c {
    color: blue;
}

JavaScript

$('.ui-datebox-griddate')
.each(function () { 
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];
  $(this).data("ui-btn-cycle", cycle);
  this.className = this.className.replace(/ui-btn-up-./, cycle[0]); 
})
.click(function (e) {
  var cycle = $(this).data("ui-btn-cycle");
  $(this).removeClass(cycle[0]).addClass(cycle[1]);
  cycle.push(cycle.shift());
  e.preventDefault(); 
});