JSFiddle - React, Tailwind, and code Playground

by jahrichie

HTML

<div>
   <div>
       <span class="active"> A</span>
        <span class="highlight"> H</span>
   </div>
   <div>
        <input class="active" type="checkbox" />
       <input class="highlight" type="checkbox" />
   </div>
 <div>
        <input class="active" type="checkbox" />
       <input class="highlight" type="checkbox" />
   </div>
 <div>
        <input class="active" type="checkbox" />
       <input class="highlight" type="checkbox" />
   </div>
 <div>
        <input class="active" type="checkbox" />
       <input class="highlight" type="checkbox" />
   </div>
 <div>
        <input class="active" type="checkbox" />
       <input class="highlight" type="checkbox" />
   </div>
</div>

CSS

.active
{
    background-color: orange;
}
.highlight
{
    background-color: green;
}

JavaScript

$(function() {
    $('.active').on('click', function(){
        $(this).next().prop('checked' , $(this).is(':checked'));
    });

});