JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Menu Item 1 <span>unselect</span></li>
    <li>Menu Item 1 <span>unselect</span></li>
    <li>Menu Item 1 <span>unselect</span></li>
    <li>Menu Item 1 <span>unselect</span></li>
    <li>Menu Item 1 <span>unselect</span></li>
    <li>Menu Item 1 <span>unselect</span></li>
</ul>

CSS

ul {
    list-style: none;
    margin: 50px;
    padding: 5px;
}

li {
    display: block;
    margin: 0;
    padding: 20px;
    background: #ccc;
    border: 1px solid #900;
    cursor: pointer;
}

li.colorful {
    background: #900;
}

ul li span {
    display: block;
    float: left;
    margin: -10px 20px -10px -10px;
    padding: 10px;
    background: #009;
    color: #fff;
}

JavaScript

$(document).ready(function () {
    $("ul li").click(function () {
        $(this).addClass("colorful");
    });
    
    $("ul li span").click(function (event) {
        var $parent = $(this).closest("li");
        event.stopPropagation();
        //$parent.removeClass("colorful");
        
    });
});