JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="rate" value="Very Good" data-value="0" />

CSS

input {
    padding: 4px 8px;
    margin: 4px;
    width: 100px;
    background-color: lime;
}

JavaScript

var values = new Array('Very Good', 'Good', 'Moderate', 'Failed');
var colors = new Array('lime', 'yellow', 'orange', 'red');

$('#rate').click(function() {

    var idx = $(this).data('value') + 1;

    if (idx >= values.length) {
        idx = 0;
    }

    $(this).data('value', idx);
    $(this).val(values[idx]);
    $(this).css('background-color', colors[idx]);

});