title: Input Value Adds on to Previous Value When Changed
body: <p>I am trying to make a JS/Jquery function where a user can type in a specific quantity of a product. When the user has input a number in the "Quantity" input, that number multiplies the product price and displays it in the "Sub-Total" input.</p>
  
  <p>Say I have some product which is priced at <code>$4</code>, my problem is that when a user enters a quantity number, say <code>12</code> which would give a subtotal of <code>$48</code>, but then changes it to <code>3</code>, it will add <code>3 * $4</code> to the <code>$48</code> giving <code>$60</code> in the "Sub-total" input, instead of <code>$12</code></p>
  
  <p>I want it to get rid of the $48.00 and only display the new sub-total, which is $12.00. Any ideas on what I can change in my function to make this functionality possible?</p>
  
  <p>My JavaScript code:</p>
  
  <pre class="lang-js prettyprint-override"><code>function selectQuantity(qty) {
  
      var qtyValue = qty.value;
      var qtyId = qty.id;
      var arr = qtyId.split('_');
      var productId = 'product_' + arr[1] + '_' + arr[2];
      var productValue = $("#" + productId).val();
  
      var prodprice = document.getElementById("prodprice");
      var selectedValue = prodprice.options[prodprice.selectedIndex].value;
  
      if (selectedValue == "client") {
          $.ajax({ //create an ajax request to load_page.php
              type: "GET",
              url: "ajax_all.php?from=pos_product1&amp;name=" + productValue,
              dataType: "html", //expect html to be returned
              success: function(response) {
                  var price = response * qtyValue;
                  var sub_total = $("#sub-total").val();
                  $("#sub-total").val((+sub_total + +price).toFixed(2));
                  gstmultiply($("#sub-total").val());
              }
          });
      } else {
  
          $.ajax({ //create an ajax request to load_page.php
              type: "GET",
              url: "ajax_all.php?from=pos_product&amp;name=" + productValue,
              dataType: "html", //expect html to be returned
              success: function(response) {
                  var price = response * qtyValue;
                  var sub_total = $("#sub-total").val();
                  $("#sub-total").val((+sub_total + +price).toFixed(2));
                  gstmultiply($("#sub-total").val());
              }
          });
  
      }
  
  }
  </code></pre>
  
  <p>And here is the specific component of my form:</p>
  
  <pre class="lang-php prettyprint-override"><code>      &lt;div class="additional_position"&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;div class="form-group clearfix"&gt;
              &lt;div class="col-sm-1 col-sm-offset-4 type"  id="category_0"&gt;
               &lt;select data-placeholder="Choose a Category..." onchange="selectCategory(this)"  id="category_dd_0" name="card_type[]" class="chosen-select-deselect1 form-control category" style="width:250px;"&gt;
                   &lt;?php
                  $query = mysqli_query($dbc,"SELECT DISTINCT category FROM inventory");
                  echo '&lt;option value=""&gt;Please Select&lt;/option&gt;';
                  while($row = mysqli_fetch_array($query)) {
                      ?&gt;&lt;option id='&lt;?php echo $row['category'];?&gt;' value='&lt;?php echo $row['category'];?&gt;'&gt;&lt;?php echo $row['category'];?&gt;&lt;/option&gt;&lt;?php
                  }
                  ?&gt;
              &lt;/select&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-3 eq" id="product_0" style="width:250px; position:relative; left:160px;"&gt;
                  &lt;select data-placeholder="Choose a Product..." name="product_name[]" id="product_dd_0"  class="chosen-select-deselect1 form-control product" width="380" style="width:250px; position:relative;"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
                  &lt;div class="col-sm-3 qt" id="qty_0" style="width:50px; position:relative; left:180px"&gt;
                      &lt;input data-placeholder="Choose a Product..." name="quantity_number[]" id="qty_dd_0" width="50px" onchange="selectQuantity(this);" value="0" style=" width:50px;" type="text" class="form-control quantity" /&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div id="add_here_new_position"&gt;&lt;/div&gt;
  
      &lt;div class="col-sm-8 col-sm-offset-4 triple-gap-bottom"&gt;
          &lt;button id="add_position_button" class="btn brand-btn mobile-block"&gt;Add&lt;/button&gt;
      &lt;/div&gt;
  
  
  
        &lt;div class="form-group"&gt;
          &lt;label for="site_name" class="col-sm-4 control-label"&gt;Sub-Total:&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input name="sub-total" id="sub-total" value=0 type="text" class="form-control" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>