Javascript函数在Modal Loops Laravel中不起作用

Question

我正在尝试创建一个POS界面，其中有许多菜单项。单击菜单图标时，模式会弹出并显示价格，数量和总字段。每个模态在foreach循环中循环。我试图根据数量和价格自动计算总数。

HTML

    <ul id="sort-me">
  @foreach($menus as $menu)
    <li class="{{ $menu->category['id'] }}" data-title="{{ $menu->price }}" data-order="{{ $menu->id }}" style="list-style:none;">
      <img  data-toggle="modal" data-target="#modal{{ $menu->id }}" class="thumbnail" src="/storage/images/{{ $menu->image }}" height="100px" width="120px" alt="{{ $menu->name }}" />
    <b>{{ $menu->name }}</b>
    </li>
    <!-- Modal -->
    <div class="modal fade" role="dialog" id="modal{{ $menu->id }}">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            {{ $menu->name }}
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-lg-4">
                <div class="form-group">
                  <label for="price">Price</label>
                    <div class="input-group">
                      <input type="text" id="pricepos" disabled name="price" value="{{ $menu->price }}" class="form-control">
                      <span class="input-group-addon">Kyats</span>
                    </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label for="quantity">QTY</label>
                  <input type="button" value="-" class="qtyminus" field="quantity">
                                <input class="form-control" type="input" name="quantity" class="quantity" id="qtypos" value="0" style="width: 70px;" readonly="readonly">
                                <input type="button" value="+" class="qtyplus" field="quantity">
                </div>

              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label for="sub">Sub Menu</label>
                  <select class="form-control" name="submenu">
                    <option value="Chicken">Chicken</option>
                    <option value="Pork">Pork</option>
                  </select>
                </div>
              </div>
            </div>
            <!-- Next row -->
          <div class="row">
            <div class="col-lg-12">
                <input class="form-control" type="text" disabled name="total" id="totalpos" value="0" style="height: 300px; font-size: 240px;">
            </div>
          </div>


          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-danger">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  @endforeach

</ul>

Javascript for plus minus btns

$('.qtyplus').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var $target = $this.prev('input[name=' + $this.attr('field') + ']');
    var currentVal = parseInt($target.val());
    if (!isNaN(currentVal)) {
        $target.val(currentVal+1);
    } else {
        $target.val(0);
    }
});
$(".qtyminus").click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var $target = $this.next('input[name=' + $this.attr('field') + ']');
    var currentVal = parseInt($target.val());
    if (!isNaN(currentVal)) {
        $target.val((currentVal == 0) ? 0 :currentVal-1);
    } else {
        $target.val(0);
    }
});

用于更新金额的Javascript

function update_amounts()
{
    var sum = 0.0;
    $('#sortme > .modal').each(function() {
        var qty = $(this).find('.qtypos').val();
        var price = $(this).find('.pricepos').val();
        var amount = (qty*price);
        sum+=amount;
        $(this).find('.totalpos').val(''+amount);
    });
}

$(document).ready(function(){
   update_amounts();
   $('.qtyplus, .qtyminus').click(function() {
   update_amounts();
  });
 })