JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul id="fifthcircleholder">
<li id="fifthc1"><span>blah blah</span></li>
<li id="fifthc2"><span>blah</span></li>
<li id="fifthc3"><span>blah</span></li>
<li id="fifthc4"><span>blah</span></li>
</ul>

CSS

li { width:100px; padding:20px; cursor:pointer; text-align:center; }
li span { background:#fff; }

#fifthc1 { background:lime; }
#fifthc2 { background:yellow; }
#fifthc3 { background:orange; }
#fifthc4 { background:blue; }

JavaScript

$("#fifthcircleholder li").click(function() {
    
    $('#fifthcircleholder li').each(function() {
        if( hexc( $(this).css('background-color') ) === '#ffffff' ){
            $(this).css('background-color', $(this).find('span').css('background-color') );
            $(this).find('span').css('background-color', '#ffffff' );
        }        
    });    
    
    $(this).find('span').css('background-color', $(this).css('background-color') );
    $(this).css('background-color', '#ffffff');
});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
   return '#' + parts.join('');
}