JSFiddle - React, Tailwind, and code Playground

by andrewcbailey89

HTML

<div class="toDoItem white" id="colorClick">To-do list item</div>
<div class="toDoItem white" id="colorClick">To-do list item</div>
<div class="toDoItem white" id="colorClick">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

$("#colorClick").click(function () {
				    if ($(this).hasClass('white')) {
				        $(this).removeClass("white").addClass("green");
				    } else if ($(this).hasClass(green)) {
				        $(this).removeClass('green').addClass('yellow');
				    } else if ($(this).hasClass(yellow)) {
				        $(this).removeClass('yellow').addClass('orange');
				    } else if ($(this).hasClass(orange)) {
				        $(this).removeClass('orange').addClass('red');
				    } else if ($(this).hasClass(red)) {
				        $(this).removeClass('red').addClass('white');
				    });