Javascript JQuery引导模式自动计算文本字段未更新

我有一个引导html页面，其中已经包含了2个自动更新文本字段函数。同时，我在一个模式中添加了另一个字段来完成页面，并要求在某个文本字段上填充另一个自动计算

第一个和第二个自动更新实例的基本表单

<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
            <div class="form-group">
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item</label>
                    <select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
                      <option value="" selected disabled>Select Item</option>
                      <?php
    //some sql function for fetch
            echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
        }
    }
    ?>
                    </select>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //FIRST INSTANCE AUTO UPDATING TEXT FIELD
                    <label for="exampleInputEmail1">Price (ea)</label>
                    <input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //2ND INSTANCE AUTO UPDATING TEXTFIELD
                    <label for="exampleInputEmail1">Total</label>
                    <input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="form-group" align="right">
                <button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
              </div>
            </div>
          </form>

          <!--create confirmation modal window-->
    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <b>Final Check</b>
                </div>
                <div class="modal-body">
      <div class="row">
          <form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
              <!-- hidden for purpose of change auto calc -->
              <input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Received</label>

<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                      //3RD INSTANCE AUTO UPDATE NOT WORKING
                        <label for="exampleInputEmail1">Change</label>
                        <input type="text" class="form-control" id="thechange" name="thechange" readonly>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
            </form>
                  </div>
                </div>
      <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success" data-dismiss="modal">Submit</a>
                </div>
            </div>
        </div>
    </div>
    <!--end modal-->

项目
选择项
//第一个实例自动更新文本字段
价格（ea）
量
//第二个实例自动更新文本字段
全部的
添加购物车

模态窗口第三个实例

<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
            <div class="form-group">
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item</label>
                    <select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
                      <option value="" selected disabled>Select Item</option>
                      <?php
    //some sql function for fetch
            echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
        }
    }
    ?>
                    </select>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //FIRST INSTANCE AUTO UPDATING TEXT FIELD
                    <label for="exampleInputEmail1">Price (ea)</label>
                    <input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //2ND INSTANCE AUTO UPDATING TEXTFIELD
                    <label for="exampleInputEmail1">Total</label>
                    <input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="form-group" align="right">
                <button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
              </div>
            </div>
          </form>

          <!--create confirmation modal window-->
    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <b>Final Check</b>
                </div>
                <div class="modal-body">
      <div class="row">
          <form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
              <!-- hidden for purpose of change auto calc -->
              <input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Received</label>

<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                      //3RD INSTANCE AUTO UPDATE NOT WORKING
                        <label for="exampleInputEmail1">Change</label>
                        <input type="text" class="form-control" id="thechange" name="thechange" readonly>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
            </form>
                  </div>
                </div>
      <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success" data-dismiss="modal">Submit</a>
                </div>
            </div>
        </div>
    </div>
    <!--end modal-->

最终检查
<script type="text/javascript">
$(document).ready(function(){
    $('.calchange').change(function(){
        var total = 0;
        $('.calchange').each(function(){
            if($(this).val() != '')
            {
                total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
            }
        });
        $('#thechange').html(total);
    });
})(jQuery);
</script>

$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
 if($(this).val() != '') {
 total += parseFloat($(this).val()); 
} 
});
 var totalFinal = total - parseFloat($('#thetotal').val());
 $('#thechange').val(totalFinal);
});