JSFiddle - React, Tailwind, and code Playground

HTML

// **** Sides Table ****
<div class="sidesContainer form-group mb-4 w-100" id="sidesContainer">
        <table class="sides">
          <caption>Add Your Sides</caption>
	    <tr><td><input type="checkbox" value="Mac \'n Cheese" name="side1" id="side1" data-price="2.50" class="item"><label for="side1">Mac \'n Cheese</label></td>
	    <td><input type="checkbox" value="Egg Roll" name="side2" id="side2" data-price="3.00" class="item"><label for="side2">Egg Roll</label></td></tr>
	    <tr><td><input type="checkbox" value="Green Beans" name="side3" id="side3" data-price="2.50" class="item"><label for="side3">Green Beans</label></td>
	    <td><input type="checkbox" value="Potato Salad" name="side4" id="side4" data-price="2.50" class="item"><label for="side4">Potato Salad</label></td></tr>
	    <tr><td><input type="checkbox" value="Seven Bean Chili" name="side5" id="side5" data-price="2.50" class="item"><label for="side5">Seven Bean Chili</label></td>
	    <td><input type="checkbox" value="Cole Slaw" name="side6" id="side6" data-price="1.50" class="item"><label for="side6">Cole Slaw</label></td></tr>
        </table>
      </div>
// **** Sauce 1 Table ****
<div class="sauce1Container form-group mb-4 w-100" id="sauce1Container">
        <table class="sauces">
          <caption>Choose 1 Sauce</caption>
	    <tr><td><input type="checkbox" value="Cheerwine" name="sauce" id="checkbox1" class="sauce1"><label for="checkbox1">Cheerwine</label></td>
	    <td><input type="checkbox" value="Hummer" name="sauce" id="checkbox2"class="sauce1"><label for="checkbox2">Hummer</label></td></tr>
	    <tr><td><input type="checkbox" value="Moovelous" name="sauce" id="checkbox3" class="sauce1"><label for="checkbox3">Moovelous</label></td>
	    <td><input type="checkbox" value="Mercy Me" name="sauce" id="checkbox4" class="sauce1"><label for="checkbox4">Mercy Me</label></td></tr>
	    <tr><td><input type="checkbox" value="Pepper Jacked" name="sauce" id="checkbox5" class="sauce1"><label...

CSS

.sides {
      width: 100%;
      padding: 5px;
      border: none;
    }

    .sides caption {
      caption-side: top;
      text-align: left;
      margin-top: -10px;
      margin-left: 20px;
      width: 120px;
      background-color: white;
      border: 1px solid #d0d6db;
      border-style: solid none none none;
      border-radius: 10px;
      padding-top: 5px;
      padding-left: 5px;
    }

    .sides td {
      text-align: left;
      padding: 0px 0px 0px 5px;
    }

    .sidesContainer {
      border: 1px solid #d0d6db;
      border-radius: 5px;
      background-color: white;
    }

    .sauces {
      width: 100%;
      padding: 5px;
      border: none;
    }

    .sauces caption {
      caption-side: top;
      text-align: left;
      margin-top: -10px;
      margin-left: 20px;
      width: 130px;
      background-color: white;
      border: 1px solid #d0d6db;
      border-style: solid none none none;
      border-radius: 10px;
      padding-top: 5px;
      padding-left: 5px;
    }

    .sauces td {
      text-align: left;
      padding: 0px 0px 0px 5px;
    }

    .sauce1Container {
      border: 1px solid #d0d6db;
      border-radius: 5px;
      background-color: white;
    }
   .sauce2Container {
      border: 1px solid #d0d6db;
      border-radius: 5px;
      background-color: white;
    }

JavaScript

var last1;
var last2;

$('input:checkbox[id="side2"]').change(function () {
if($('#side2').prop('checked')) {
    $("#sauce1Container").hide();
    $("#sauce2Container").show();
//		$('.sauce1').prop("checked", false);
}// else {
//    $("#sauce1Container").show();
//    $("#sauce2Container").hide();
//  $('.sauce2').prop("checked", false);
//}
})


$('input:checkbox[class="sauce1"]').change(function () {
if (this.checked) {
				    $('.sauce2').prop("checked", false);
        if ($('input[type="checkbox"]:checked').length > 1) {
            $(last1).prop('checked', false);
        }
        last1 = this;
    }
});

$('input:checkbox[class="sauce2"]').change(function () {
if (this.checked) {
				    $('.sauce1').prop("checked", false);
        if ($('input:checkbox[type="checkbox"]:checked').length > 2) {
            $(last2).prop('checked', false);
        }
        last2 = this;
    }
});