JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<div class="manage-user-freind" style="line-height:18px; cursor:pointer;"> <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="10" />pieter
  </span>

</div>
<div class="manage-user-freind" style="line-height:18px; cursor:pointer;"> <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="12" />john
  </span>

</div>

CSS

.clicked {
    background-color: yellow;
}

JavaScript

$('.manage-user-freind').on('click', function () {
    
    $(this).toggleClass('clicked').find('.chk').prop('checked', $(this).hasClass('clicked'));
});