Allowing to select certain amount of checkboxes, based on previous answer

If i select one from the first checkbox selection, it only allows me to check one teacher and if i select both, it allows me to check two teachers which is how i wanted it to work.

The problem i have is that if i uncheck one of the first checkboxes, i can select any amount of the teachers.

So I would like to sort this issue out and sort of always check how many subjects are selected, and based on that, allow the user to only select that amount of teachers from the second pile of checkboxes.

<div id="chooseSubject" style="margin-bottom:24px;">
  <label id="selectSubject" class="form-control">Select your subject(s)</label>
  <table style="width:auto;text-align:left;margin-bottom:1px;margin-top:13px">
    <tr>
      <th style="font:inherit;padding-right:110px;display: flex;">
        <input type="checkbox" id="french" name="subjects[]" value="french" style="display:none; position:absolute; left:9999px;">
        <label for="french" style="margin-right:98px;"><span></span>French</label>

        <input type="checkbox" id="german" name="subjects[]" value="german" style="display:none; position:absolute; left:9999px;">
        <label for="german" style="float:right;"><span></span>German</label>
      </th>
    </tr>
  </table>
</div>

<!-- TEACHER SELECTION -->

<div id="chooseTeacher" style="margin-bottom:24px;">
  <label id="selectTeacher" class="form-control">Select your teacher(s)</label>
  <table style="width:auto;text-align:left;margin-bottom:1px;margin-top:13px">
    <tr>
      <th style="font:inherit;display:flex;">
        <input type="checkbox" id="archer" name="teachers[]" value="archer" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
        <label for="archer" style="margin-right:68px;"><span></span>Miss Archer</label>

        <input type="checkbox" id="craig" name="teachers[]" value="craig" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
        <label for="craig"><span></span>Miss Craig</label>
      </th>
      <th style="font:inherit;padding-right:110px;display: flex;">
        <input type="checkbox" id="devine" name="teachers[]" value="devine" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
        <label for="devine" style="margin-right:65px;"><span></span>Miss Devine</label>

        <input type="checkbox" id="dorrity" name="teachers[]" value="dorrity" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
        <label for="dorrity"><span></span>Miss Dorrity</label>
      </th>
    </tr>
  </table>
</div><br>

var count = 0
function countCheckedBoxes(elem) {
    if(german.checked && french.checked){
        if(elem.checked){
            if(count <= 2){
                count = count + 1;
                if(count > 2)  {
                    count = 2;
                    elem.checked = false;
                }
            }
         } else {
             count = count - 1;
             if(count < 0)  count = 0;
         }
     }
     if(german.checked || french.checked){
        if(elem.checked){
            if(count <= 1){
                count = count + 1;
                if(count > 1)  {
                    count = 1;
                    elem.checked = false;
                }
            }
         }
     }
}