JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div class="cat-lists hidden-xs hidden-sm">
    <ul class="addtab"><li class="Infections-and-Allergies"><a id="tabdata">Infections &amp; Allergies</a></li><li class="Urinary-Problems"><a id="tabdata">Urinary Problems</a></li><li class="Eye-Health"><a id="tabdata">Eye Health</a></li><li class="Mental-and-Neuro"><a id="tabdata">Mental &amp; Neuro</a></li><li class="Oral-Health"><a id="tabdata">Oral Health</a></li><li class="Kids-Health"><a id="tabdata">Kids Health</a></li> <li id="show_more" style="display: none;"><a href="javascript:void(0)" class="show-more">More..</a><a href="javascript:void(0)" class="show-less" style="">Less..</a></li></ul><br><br><br>
    <ul class="subtab hidden-more addtab_more" style="display: block;"><li class="Diabetes"><a id="tabdata">Diabetes</a></li><li class="Lung-Problems"><a id="tabdata">Lung Problems</a></li><li class="Liver-Health"><a id="tabdata">Liver Health</a></li><li class="Heart-Health"><a id="tabdata">Heart Health</a></li><li class="Kidney-Disorders"><a id="tabdata">Kidney Disorders</a></li><li class="Digestive-Disorders"><a id="tabdata">Digestive Disorders</a></li><li class="Sexual-Disorders"><a id="tabdata">Sexual Disorders</a></li><li class="Skin-Health"><a id="tabdata">Skin Health</a></li><li class="Sleep-Disorders"><a id="tabdata">Sleep Disorders</a></li><li class="Beauty-and-Wellness"><a id="tabdata">Beauty &amp; Wellness</a></li><li class="Womens-Health"><a id="tabdata">Womens Health</a></li><li class="Hair-Care"><a id="tabdata">Hair Care</a></li><li class="Others"><a id="tabdata">Others</a></li><li class="Pain-Management"><a id="tabdata">Pain Management</a></li><li class="Ear-Nose-and-Throat"><a id="tabdata">Ear, Nose &amp; Throat</a></li></ul>
</div>

CSS

.active{
color:red;
font-size:25px;
font-weight:bold;
}

JavaScript

$('ul li').on('click', function() {  
    $('ul li.active').removeClass('active');
    $(this).addClass('active');    
});