Jquery - Multiplying my two classes give no results

Question

<div id="container">
  <div class="jumbotron" id="group">
    <form class="form-inline">
      <div class="form-group">
        <label for="groupNumber">Group:</label>
        <input type="text" class="groupNumber" />
      </div>
      <div class="form-group inputTop">
       <label for="quantity">Quantity:</label>
       <input type="text" class="quantity" />
      </div>
     <div class="form-group inputTop">
       <label for="systemPrice">System Price:</label>
       <input type="text" class="systemPrice" />
     </div>
     <div class="form-group">
        <label for="groupTotal">Group Total:</label>
       <input type="text" class="groupTotal" />
     </div>
   </form>

   <div class="row specs" id="pasted" contenteditable="true"></div>

   </div>
 </div>

$(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);
    });
   }
});

JS Fiddle: https://jsfiddle.net/waynebunch/jh6uhL1p/5/

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

Answer 1

Replace:

$('.groupTotal', this).text($groupTotal);

With:

$('.groupTotal', this).val($groupTotal);