JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<li id="cl1" class="ico ico1 active"></li>

CSS

.ico.ico1.active {
    background:gray;
    width:50px;
    height:50px;
}
.ico.ico1 {
    background:green;
    width:50px;
    height:50px;
}
.icotoggle {
    background:url(https://appconnect.cdxlife.com/webapp_ges/img/rating-sprite.png) no-repeat; 
    width:50px;
    height:50px;
    https://appconnect.cdxlife.com/webapp_ges/img/rating-sprite.png
}

JavaScript

var classNames = ['ico ico1 active', 'ico ico1', 'icotoggle'];
$('#cl1').click(function () {
    $(this).toggleClass(function (i, className, b) {
        var index = (classNames.indexOf(className) + 1) % classNames.length;
        $(this).removeClass(className);
        return classNames[index];
    });
});