JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<input name="class[]" data="COP1000" value="<tr><td>COP1000 <td>8:00AM-9:00AM 
</td><td>MWF </td><td>Sanford </td><td>3</td></tr>" type="checkbox" class="auto-
style88"/>
<input name="class[]" data="COP1000" value="<tr><td>COP1000 <td>11:30AM-12:00PM
</td><td>TTH </td><td>Altamonte </td><td>3</td></tr>" type="checkbox" class="auto-
style88" />

<input name="class[]" data="COP2830" value="<tr><td>COP2830 <td>11:00AM-12:00PM 
</td><td>MWF </td><td>Sanford </td><td>3</td></tr>" type="checkbox" class="auto-
style88"/>
<input name="class[]" data="COP2830" value="<tr><td>COP2830 <td>6:00PM-8:45PM 
</td><td>T </td><td>Altamonte </td><td>3</td></tr>" type="checkbox" class="auto-
style88"/>

JavaScript

$(document).ready(function () {
    $("input:checkbox").click(function () {
        var self = $(this);
        var data = self.is(":checked") ?  self.attr("data") : undefined
       
        self.siblings(":checked").each(function(){
            if($(this).attr("data") === data){
                self.attr("checked", false);
                alert("You can only select this class once");
            }
        }); 
    });
});