JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toDoItem white">To-do list item</div>
<div class="toDoItem white">To-do list item</div>
<div class="toDoItem white">To-do list item</div>

CSS

.toDoItem {
  text-align: left;
  padding: 3px;
  margin-bottom: 5px;
  border: 1px solid;
  border-color: #e8e7e7;
}

.white {
  background-color: #ffffff;
}

.green {
  background-color: #b2d8b2;
}

.yellow {
  background-color: #ffffb2;
}

.orange {
  background-color: #ffe4b2;
}

.red {
  background-color: #ffb2b2;
}

JavaScript

var colors = ['white', 'green', 'yellow', 'orange', 'red'];
var total = colors.length-1;

$(".toDoItem").click(function() {
    var color = $(this).attr('class').split(' ')[1];
    var index = colors.indexOf(color);
    index = index==total? 0 : index+1;
    
    $(this).removeClass(color).addClass(colors[index]);
});