Javascript Driven Table Values

Question

I'm working on a Product Detail page that allows users to choose the number of products to purchase. I currently have the quantity dial working properly, but I need to piggyback on such feature to update a table that displays the total purchase charge.

Here's the DEMO on JSFiddle

The table that needs to be dynamically updated as Users increase or decrease the quantity of product using the - or + buttons:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="pricing-summary">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Qty.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Unit Price</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Discount</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Total</div>
  </div>
  <div class="clearfix pt8"></div>
  <div id="pricing-breakdown">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$quantity</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4.35</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$0.40</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$3.95</div>
  </div>
</div>

As part of the implementation, I need to be able to control 2 different variables:

1. unit price ($4.35)
2. discount percentage (10% = (unit price x discount))

Controlling these 2 variables will allow generating the Discounted cost ($3.95), the Discount ($0.43) and the Total (Quantity X Discount Cost).

I would appreciate any help resolving this issue.

Answer 1

I have updated a copy of your fiddle demo. Please see if it fits your requirement: http://jsfiddle.net/m4n8xe3r/75/

Solution below:

$(document).ready(function() {

  var quantitiy = 0;
    var unitPrice = 4.35;
  var discount = 0.1;

    var updatePriceTable = (quantity) => {
    totalPrice =  Number(quantity * unitPrice).toFixed(2);
    totalDiscount = Number(totalPrice * discount).toFixed(2);
    finalPrice = Number(totalPrice - totalDiscount).toFixed(2);
    $('#totalQuantityElem').text(quantity);
    $('#totalPriceElem').text(totalPrice);
    $('#totaldiscountElem').text(totalDiscount);
    $('#finalPriceElem').text(finalPrice);
    $('#totalPriceHeaderElem').text(totalPrice);
    $('#finalPriceHeaderElem').text(finalPrice);
  }


  $('.quantity-right-plus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) + 1;
        $('#quantity').val(quantity);
        updatePriceTable(quantity);
  });

  $('.quantity-left-minus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) - 1;
    if (quantity > 0) {
      $('#quantity').val(quantity);
      updatePriceTable(quantity);
    }  
  });

});