jQuery checkbox function not working with show/hide

I have 2 divs with group of checkboxes that conditionally permit 1 or 2 boxes to be selected. The functions work well when both div groups are not hidden by default. I created a Jsfiddle HERE to demonstrate the issue.

If a client chooses an Egg Roll, they are permitted an additional sauce. My intent is to allow 2 selections only if an eggroll is selected. Currently, if I show or hide a div before selecting a sauce, the function that permits 2 selections breaks.

Any help to make the code work on one div only, or on both divs when they are shown or hidden, would be appreciated.

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;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 for="checkbox5">Pepper Jacked</label></td>
      <td><input type="checkbox" value="9mm" name="sauce" id="checkbox6" class="sauce1"><label for="checkbox6">9mm</label></td>
    </tr>
  </table>
</div>
// **** Sauce 2 Table ****
<div class="sauce2Container form-group mb-4 w-100" id="sauce2Container">
  <table class="sauces">
    <caption>Choose 2 Sauces</caption>
    <tr>
      <td><input type="checkbox" value="Cheerwine" name="sauce" id="checkbox7" class="sauce2"><label for="checkbox1">Cheerwine</label></td>
      <td><input type="checkbox" value="Hummer" name="sauce" id="checkbox8" class="sauce2"><label for="checkbox2">Hummer</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Moovelous" name="sauce" id="checkbox9" class="sauce2"><label for="checkbox3">Moovelous</label></td>
      <td><input type="checkbox" value="Mercy Me" name="sauce" id="checkbox10" class="sauce2"><label for="checkbox4">Mercy Me</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Pepper Jacked" name="sauce" id="checkbox11" class="sauce2"><label for="checkbox5">Pepper Jacked</label></td>
      <td><input type="checkbox" value="9mm" name="sauce" id="checkbox12" class="sauce2"><label for="checkbox6">9mm</label></td>
    </tr>
  </table>
</div>