title: Disable remaining number input fields after max total of all input fields
body: <p>I have an ecommerce product that I sell a box of assorted flavor bagels. The max amount of flavors per box is 12. I have a number input field for each of the 12 flavors as shown in the screenshot below.</p>
  <p><a href="https://i.stack.imgur.com/eSU09.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSU09.png" alt="Screenshot Front end inputs" /></a></p>
  <p>I was able to use JavaScript to limit each individual number field from exceeding 12 but I am trying to make it where the other input fields disable once the total of all fields reaches the max of 12.</p>
  <p>The code below is what I am using to get the total of all the fields.
  but at the moment It only prevents the increase of number on an individual field once it reaches 12.</p>
  <p>I want to prevent from adding more than 12 in total from all fields combined which will complete the box of 12 bagels</p>
  <pre><code>const totalMaxQty = 12;
  
  getAllInputs.forEach(allInputs);
  
  function allInputs(value) {
      value.addEventListener(&quot;input&quot;, function(e) {
          e.preventDefault();
          sumTotal();
      });
  }
  
  function sumTotal() {
      let sumValue = document.querySelectorAll('.wapf-field-input input[type=number]');
      let currentTotal = 0;
  
      for (let i = 0; i &lt; sumValue.length; i++) {
          if (parseInt(sumValue[i].value)) {
              currentTotal += parseInt(sumValue[i].value);
          };
      }
  }
  
  for (let i = 0; i &lt; getAllInputs.length; i++) {
      getAllInputs[i].max = totalMaxQty;
  }
  </code></pre>
  <p>Vanilla JavaScript only, please.</p>