JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="selected-list" class="droptrue sort-drop">
                  <li class="sortedli" style="">Call list
                
                    <ul id="select-navlist" style="float: right;">
                        <li class="sel-display">xx</li>
                        <li><a href="#">aa</a></li>
                        <li><a href="#">bb</a></li>
                        <li><a href="#">cc</a></li>
                        <li><a href="#">dd</a></li>
                    </ul>
                </li>
              </ul>

CSS

#selected-list {
    list-style-type: none;
    padding: 0;
    float: left;
    margin: 0px 10px 0px 10px;
    padding: 0px;
    width: 530px;
    min-height: 224px;
    background: #eee;
   
    background-repeat: no-repeat;
    background-position: 70px 80px;
}
#selected-list li {
    margin: 1px;
    padding: 3px 5px 3px 10px;
    width: 513px;
    background: #fff;
    color: #9D9D9D;
}
#selected-list li:hover {
    background: #cae8ff;
    border-color: rgba(82, 168, 236, 0.8);
    cursor: pointer;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
#select-navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.del {
    background-color: #ffcc00 !important;
}

JavaScript

$(".sel-display").click(function () {
    $(this).toggleClass('del');
});