How can I limit numeric inputs based on their sum
<p>This is my first time doing huge amounts of javascript, so I apologize if this is a basic question.</p>

<p>So for part of an order form, a person can order a total of 10 pizzas that could be different types. You can get the jist of it here:</p>

<pre><code>&lt;div&gt;&lt;h3&gt;Types of Pizzas&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;
        &lt;input type="checkbox" name="selections" id="pizza1"&gt;&lt;label&gt;pizza1&lt;/label&gt;
            &lt;div id="PC1"&gt;
                &lt;label&gt;How Many?&lt;/label&gt;&lt;input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"&gt;
            &lt;/div&gt;
    &lt;/div&gt;

    &lt;div&gt;
        &lt;input type="checkbox" name="selections" id="pizza2"&gt;&lt;label&gt;pizza2&lt;/label&gt;
            &lt;div id="PC2"&gt;
                &lt;label&gt;How Many?&lt;/label&gt;&lt;input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"&gt;
            &lt;/div&gt;
    &lt;/div&gt;

    &lt;div&gt;
        &lt;input type="checkbox" name="selections" id="pizza3"&gt;&lt;label&gt;pizza3&lt;/label&gt;
            &lt;div id="PC3"&gt;
                &lt;label&gt;How Many?&lt;/label&gt;&lt;input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"&gt;
            &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>So let's say that if a person inputs 4 orders of pizza1, 5 orders of pizza2, and is about to put in 2 orders of pizza3 (11 pizzas), how would I limit his input without the use of a submit button in real time?</p>

<p>Thank you</p>

<p>EDIT: There are much more than three types of pizzas. This is just a screenshot of code I have written.</p>