Jquery - Multiplying my two classes give no results
<pre><code>&lt;div id="container"&gt;
  &lt;div class="jumbotron" id="group"&gt;
    &lt;form class="form-inline"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="groupNumber"&gt;Group:&lt;/label&gt;
        &lt;input type="text" class="groupNumber" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group inputTop"&gt;
       &lt;label for="quantity"&gt;Quantity:&lt;/label&gt;
       &lt;input type="text" class="quantity" /&gt;
      &lt;/div&gt;
     &lt;div class="form-group inputTop"&gt;
       &lt;label for="systemPrice"&gt;System Price:&lt;/label&gt;
       &lt;input type="text" class="systemPrice" /&gt;
     &lt;/div&gt;
     &lt;div class="form-group"&gt;
        &lt;label for="groupTotal"&gt;Group Total:&lt;/label&gt;
       &lt;input type="text" class="groupTotal" /&gt;
     &lt;/div&gt;
   &lt;/form&gt;

   &lt;div class="row specs" id="pasted" contenteditable="true"&gt;&lt;/div&gt;

   &lt;/div&gt;
 &lt;/div&gt;

$(document).ready(function() {
  $('.inputTop input').keyup(multInputs);

  function multInputs() {
    $('.inputTop').each(function() {
        var $quantity = $('.quantity', this).val();
        var $systemPrice = $('.systemPrice', this).val();
        var $groupTotal = ($quantity * 1) * ($systemPrice * 1)
    $('.groupTotal', this).text($groupTotal);
    });
   }
});
</code></pre>

<p>JS Fiddle:  <a href="https://jsfiddle.net/waynebunch/jh6uhL1p/5/" rel="nofollow">https://jsfiddle.net/waynebunch/jh6uhL1p/5/</a></p>

<p>I've been staring at this for a while and am not seeing anything wrong.  Basically, I'm trying to use JQuery to multiply <code>var $quantity</code> by <code>var $systemPrice</code> and have the result displayed in <code>var $groupTotal</code>.  There will multiple "groups" of these.  Can someone tell me what I'm doing wrong here, or if I'm way off?  Thank you!</p>