JSFiddle - React, Tailwind, and code Playground

HTML

<legend>Complete the recipe</legend>
      <div>
        <input type="checkbox" id="EnchTbl" name="EnchTbl">
        <label for="EnchTbl">Enchantment table</label>
        <br>
<span>
            <input type="checkbox" id="book" name="ingredient" value="book">
            <label for="book">Book</label>
        <br>
            <input type="checkbox" id="diamonds" name="ingredient" value="diamonds">
            <label for="diamonds">Diamonds (x2)</label>
        <br>
            <input type="checkbox" id="obsidian" name="ingredient" value="obsidian">
            <label for="obsidian">Obsidian (x4)</label>
</span>
      </div>

JavaScript

var overalll = document.querySelectorAll('input[id="EnchTbl"]');
  var ingredients = document.querySelectorAll('span input');

  for(var i = 0; i < ingredients.length; i++) {
    ingredients[i].addEventListener('click', updateDisplay);
  }

  function updateDisplay() {
    var checkedCount = 0;
    for(var i = 0; i < ingredients.length; i++) {
      if(ingredients[i].checked) {
        checkedCount++;
      }
    }

    if(checkedCount === 0) {
      overalll[0].checked = false;
      overalll[0].checked = false;
    } else {
      overalll[0].checked = false;
      overalll[0].checked = true;
    }
  }
/*******************************************************/

for(var i = 0; i < overalll.length; i++) {
    overalll[i].addEventListener('click', updateDisplay1);
  }

  function updateDisplay1() {
    var checkedCount1 = 0;
    for(var i = 0; i < overalll.length; i++) {
      if(overalll[i].checked) {
        checkedCount1++;
      }
    }

    

    if(checkedCount1 === 0) {
    
    var checkedCount1 = 0;
    for(var i = 0; i < ingredients.length; i++) {
      ingredients[i].checked = false;
      ingredients[i].checked = false;
    }
    } else {
    
    var checkedCount1 = 0;
    for(var i = 0; i < ingredients.length; i++) {
      ingredients[i].checked = false;
      ingredients[i].checked = true;
    }
      
    }
  }