JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.highlight
{
background:red;
height:10px;
width:10px;
}


</style>

checkbox1<span id="checkboxx" class="highlight first" >  
<input type="checkbox" class="checkboxx first" id="checkboxx" style="padding: 0px; margin: 2px;">                        
</span>

<!-- You should not use id's for more than 1 element, use classes instead -->
checkbox1<span id="checkboxx_1" class="highlight" >  
<input type="checkbox" class="checkboxx first"  id="checkboxx_1" style="padding: 0px; margin: 2px;">                        
</span>
<br>



checkbox2<span id="checkboxx_2" class="highlight" >  
<input type="checkbox" class="checkboxx" id="checkboxx_2" style="padding: 0px; margin: 2px;">                        
</span>



<br>
checkbox3<span id="checkboxx_3" class="highlight" >  
<input type="checkbox" class="checkboxx" id="checkboxx_3" style="padding: 0px; margin: 2px;">                        
</span>

JavaScript

$('.first').click(function(){
                $('.first').removeClass("highlight");
                $('.first').attr('checked','checked');
});