JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul class="class1">
    <li> img1        
    </li>    
    <li>
        img2
    </li>    
    <li>
        img3
    </li>    
    <li>
        img4
    </li>
</ul>
</div>
<div>
<button id="getSel">Get Selected Image</button>
</div>

CSS

ul
{
    list-style:none;
}
div{
    margin:20px 20px;
}
ul li
{
    line-height:20px;
    padding:5px 10px;
    margin:5px 0px;
    width:250px;
    
}
.class1 li{
    background-color:#dddddd;
    color:#000000;
}
.class1 li:hover{
   background-color:#bbbbbb; 
}
.liClass2{
    background-color:#000000 !important;
    color:#ffffff !important;
}

JavaScript

$(function(){
    $("ul.class1 li").each(function(i, v){
        $(this).click(function(){                     
            $(this).
                siblings().each(function(){ $(this).removeClass("liClass2");  }).
                end().addClass("liClass2");
        });
    });
    
    $("#getSel").click(function(){
        alert((($("ul.class1 li.liClass2").length > 0)?
               $.trim($("ul.class1 li.liClass2").html()):"No Image selected"));
    });
});