更改时，输入值将添加到上一个值

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.

Say I have some product which is priced at $4, my problem is that when a user enters a quantity number, say 12 which would give a subtotal of $48, but then changes it to 3, it will add 3 * $4 to the $48 giving $60 in the "Sub-total" input, instead of $12

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?

My JavaScript 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&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&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());
            }
        });

    }

}

And here is the specific component of my form:

      <div class="additional_position">
        <div class="clearfix"></div>
        <div class="form-group clearfix">
            <div class="col-sm-1 col-sm-offset-4 type"  id="category_0">
             <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;">
                 <?php
                $query = mysqli_query($dbc,"SELECT DISTINCT category FROM inventory");
                echo '<option value="">Please Select</option>';
                while($row = mysqli_fetch_array($query)) {
                    ?><option id='<?php echo $row['category'];?>' value='<?php echo $row['category'];?>'><?php echo $row['category'];?></option><?php
                }
                ?>
            </select>
            </div>

            <div class="col-sm-3 eq" id="product_0" style="width:250px; position:relative; left:160px;">
                <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;">
                    <option value=""></option>

                </select>
            </div>
                <div class="col-sm-3 qt" id="qty_0" style="width:50px; position:relative; left:180px">
                    <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" />
                </div>

        </div>

    </div>



    <div id="add_here_new_position"></div>

    <div class="col-sm-8 col-sm-offset-4 triple-gap-bottom">
        <button id="add_position_button" class="btn brand-btn mobile-block">Add</button>
    </div>



      <div class="form-group">
        <label for="site_name" class="col-sm-4 control-label">Sub-Total:</label>
        <div class="col-sm-8">
          <input name="sub-total" id="sub-total" value=0 type="text" class="form-control" />
        </div>
      </div>