JSFiddle - React, Tailwind, and code Playground
HTML
<div class="list">
<ul class="level0">
<li class="level1">text1</li>
<li class="level1">text2</li>
<li class="level1">text3</li>
<li class="level1">text4</li>
<li class="level1">text5</li>
</ul>
<ul class="level0">
<ul class="level1">
<li class="level2">text1</li>
<li class="level2">text2</li>
<li class="level2">text3</li>
<li class="level2">text4</li>
<li class="level2">text5</li>
</ul>
<ul class="level1">
<li class="level2">text1</li>
<li class="level2">text2</li>
<li class="level2">text3</li>
<li class="level2">text4</li>
<li class="level2">text5</li>
</ul>
</ul>
</div>
CSS
.selected {
background-color: blue;
color: #fff;
}
JavaScript
var lis = $('.list li').click(function(e){
if(!e.ctrlKey) {
// Ctrl not pressed, clear previous selections
lis.removeClass("selected");
}
$(this).addClass("selected");
});