JSFiddle - React, Tailwind, and code Playground
HTML
<form id="form">
<br />
<div class="wrapper">
<div class="vragen">
<h1>Classes</h1>
<h2>Bussiness</h2>
<table width="100%" border="0" cellpadding="5">
<tbody>
<tr bgcolor="#E3EAF6">
<td width="15" align="left" valign="top" bgcolor="#FEF3E4"><input type="hidden" name="business" value="~" /></td>
<td width="150" align="left" valign="top" bgcolor="#FEF3E4"><em>Day</em></td>
<td width="250" align="left" valign="top" bgcolor="#FEF3E4"><em>Time</em></td>
</tr>
<tr>
<td width="15" align="left" valign="top"><input name="business" type="radio" class="time" value="Wednesday Oct/30 | 10:00 AM- 12:15 PM" /></td>
<td width="150" align="left" valign="top">Wednesday Oct/30</td>
<td width="250" align="left" valign="top">10:00 AM- 12:15 PM</td>
</tr>
<tr>
<td width="15" align="left" valign="top" bgcolor="#FEF3E4"><input name="business" type="radio" class="time" value="Thursday Oct/31 | 1:00 PM - 3:15 PM" /></td>
<td width="150" align="left" valign="top" bgcolor="#FEF3E4">Thursday Oct/31</td>
<td width="250" align="left" valign="top" bgcolor="#FEF3E4">1:00 PM - 3:15 PM</td>
</tr>
<tr>
<td width="15" align="left" valign="top"><input name="business" type="radio" class="time" value="Friday Nov/01 | 10:00 AM- 12:15 PM" /></td>
<td width="150" align="left" valign="top">Friday Oct/31</td>
<td width="250" align="left" valign="top">11:00 AM- 1:15 PM</td>
</tr>
<tr>
<td width="15" align="left" valign="top" bgcolor="#FEF3E4"><input...
CSS
.red td {
background-color: red!important;
}
JavaScript
$( document ).ready(function() {
$(".time").change(function() {
var values = $("input.time").map(function(){
return $(this).val();
});
values.each( function (){
var overlapping = $("input.time[value='"+ this +"']");
if (overlapping.filter(":checked").length > 1){
overlapping.parents("tr").addClass("red");}
else{
overlapping.parents("tr").removeClass("red");
}
})
});
});