JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
</ul>

CSS

.current{color:tomato;position:relative}
.current:after{
    position:absolute;
    left:10px;
    bottom:0;
    width:100px;
    height:auto;
    content:'current';
}

JavaScript

$(document).ready(function(){
    var elCurrent = document.getElementsByClassName('current')
    if(!$('ul').find($(elCurrent)).length) $('li').eq(0).addClass('current');
    console.log(elCurrent.length); // 1

    $('li').on('click', function(){
        $(elCurrent).removeClass('current'); // remove nothing

        $(this).addClass('current');
            
                
    
    });
});