JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<ul>
    <li><p>one</p></li>
    <li><p>two</p></li>
    <li class="selected"><p>three</p></li>
</ul>

CSS

li {
    border: 1px solid #000;
    cursor: pointer;
    list-style: none;
    margin: 10px;
}

p {
    font-size: 20px;
    height: 20px;
    margin: 10px;
}

.selected {
    background-color: #0c0;
}

JavaScript

var $pars = $('li p');
$pars.on('click', function(){
    $pars.not(
        $(this).parent().toggleClass('selected').end()
    ).parent().removeClass('selected');
});