javascript - JavaScript 駆動のテーブル値

Question

ユーザーが購入する製品の数を選択できる製品詳細ページに取り組んでいます。現在、数量ダイヤルは適切に機能していますが、そのような機能に便乗して、合計購入料金を表示するテーブルを更新する必要があります。

JSFiddleのデモはこちら

ユーザーが - または + ボタンを使用して製品の数量を増減すると、動的に更新する必要があるテーブル:

<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>

実装の一環として、2 つの異なる変数を制御できるようにする必要があります。

1. 単価 ($4.35)
2. 割引率 (10% = (単価 x 割引))

これら 2 つの変数を制御すると、割引コスト ($3.95)、割引 ($0.43)、および合計 (数量 X 割引コスト) を生成できます。

この問題を解決するための助けをいただければ幸いです。