JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sch_cal_row childChk">
    <input type='checkbox'  >Tom </input>
</div>

<div class="sch_cal_row childChk">

    <input type='checkbox'  >Dick </inpu>
</div>

CSS

.red{
  color: red; 
}
.green{
  color: green;
}

div.sch_cal_row {
    margin-top: 0px;
    margin-left: 0px;
    width: 300px;
    border-radius: 3px;
    height: 20px;
}


div.highlight {
    width: 300px;
    height: 20px;
    background-color: #E0FBD9;
}
div.high1 {
    width: 300px;
    height: 20px;
    background-color: #FFA07A;

}

div.available {
    width: 100px;
    height: 46px;
    background-color: #A8A69C;
}

JavaScript

$(".childChk").click(function () {
    if ($(".childChk:checked"))
    {
        $(this).addClass("highlight");
    } else{
        $(this).removeClass("highlight");
    }
});