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">
                          
                           <!-- ERROR HERE - should be Oct 31 | 11 AM ... -->
                          <!--<input name="business" type="radio" class="time" value="Friday Nov/01 | 10:00 AM- 12:15 PM" />-->
                        
                        <input name="business" type="radio" class="time" value="Friday Oct/31 | 11:00 AM- 1:15 PM" /></td>
                        
 ...

CSS

.red td {
background-color: red!important;
}

JavaScript

$(".time").change(function() {    
    removeErrors();
    var dateOverlapping = $("input.time:checked").filter(function() {
        return $("input.time[value^='"+ $(this).val().split('|')[0] +"']:checked").length > 1;
    });
    dateOverlapping.each(function(i, elem){
        var timeOverlapping = dateOverlapping.filter(function(i2, elem2) {
            return i != i2 && overlaps(range($(elem).val().split('|')[1]), 
                                       range($(elem2).val().split('|')[1]));
        });
        if(timeOverlapping.length > 0)
            $(elem).parents("tr").addClass('red');
        else
            $(elem).parents("tr").removeClass('red');
    });
});

function removeErrors() {
    $("input.time").each(function() {
        $(this).parents("tr").removeClass('red');
    });
}

function overlaps(range1, range2) {
    return (range1.start <= range2.end) && (range2.start <= range1.end);
}

function range(timeStr) {
    var tms = timeStr.split('-');
    return {
        start : timeToFloat(tms[0]),
        end : timeToFloat(tms[1])
    };
}

function timeToFloat(time)
{
    var toks = time.trim().split(/\s+/);
    var num = toks[0].trim().split(':');
    var val = parseFloat(num[0]) + 0.01 * parseFloat(num[1]);
    if(Math.floor(val) == 12)
    {
        if(toks[1].toLowerCase() == "am")
            val -= 12;
    }
    else if(toks[1].toLowerCase() == "pm")
        val += 12;
    return val;
}