JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tmpl">
<li>
<div  class="favorite">
 <label>
     <input type="checkbox" name="sortList" class="checkboxGroup" data-role="none" /> <input type="checkbox" name="sortList" class="checkboxGroup" data-role="none" /> <input type="checkbox" name="sortList" class="checkboxGroup" data-role="none" />
 <i></i>
</label>
</div>
</li>
</ul>

CSS

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + i:before {
    content:'\e809';
    color:lightgray;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}
input[type="checkbox"]:checked + i:before {
    content:'\e809';
       content: ""
    color:red;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}

JavaScript

$("#tmp li").on("vclick",function(){
    alert("li clicked");
});

$(".favorite i").on("vclick",function(e){
    alert("checkbox clicked");
    e.stopPropagation();
});