title: On input change, get all input values in div and update label
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="filters"&gt;
  
      &lt;div class="filter-label"&gt;6&lt;/div&gt;
  
      &lt;div class="filter-inputs"&gt;
  
          &lt;input type="number" name="i1" id="i1" value="1" min="0" step="1" /&gt;
          &lt;input type="number" name="i2" id="i2" value="2" min="0" step="1" /&gt;
          &lt;input type="number" name="i3" id="i3" value="3" min="0" step="1" /&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong><em>The question:</em></strong></p>
    
    <p>I'd like to, when any input is changed, I want to get that value and
    the value of the other two text boxes and add them all together. Once
    I have the total value, I need to then change the text of the label
    with the new value.</p>
  </blockquote>
  
  <p>I also have the following JavaScript (jQuery) to detect when a change has happened, but after that, I can't figure out how to loop through each input in the div and get the value.</p>
  
  <pre><code>$('.filter .filter-inputs input').on('input', function() {
  
      var element = $(this);
  
      // ...
  
  });
  </code></pre>
  
  <p>I looked at loops like the jQuery <code>each</code> method but I've got no idea how to loop through each input inside the <code>filter-inputs</code> div.</p>