添加购物车表行项目数量

Question

I have the following markup in foreach :

@foreach($addedToCart as $item)
    <tr class="cart-row">
        <td>{{ $item->product->name }}</td>
        <td>{{ $item->product->price }}</td>
        <td>
            <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
            <input type="text" id="number" class="totalQuantity" value="1" />
            <div class="value-button" id="increase" class="increase" data-unit-price="{{ $item->product->price }}" onclick="increaseValue()" value="Increase Value" data-value="1">+</div>
        </td>
    </tr>
@endforeach

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <h3>Total Amount : $ <span id="totalAmount"> 0</span></h3>
</div>

Jquery :

$('#increase').on("click", function () {
    var st = 0;
    $('.cart-row').each(function () {
        var i = $('#increase', this);
        var up = $(i).data('unit-price');
        var q = $('.totalQuantity').val();
        st = st + (up * q);
    });
    $('#totalAmount').text(st);
});

The issue is that, It only works for only first row. The <tr></tr> is in foreach and every tr have class cart-row .

What am i missing ?

Answer 1

Its working on 1st element only because there must be only one ID in a DOM. If you put more than one then it will consider the 1st one from top in the DOM.

From the code you have posted, I can see that you have also binded class with the same name. So if you use it as a selector in your jquery code it will work fine.

$('.increase').on("click", function () {
    var st = 0;
    $('.cart-row').each(function (i, obj) {
        var up = $('.cart-row:eq('+i+')').find('.increase').data('unit-price');
        var q = $('.cart-row:eq('+i+')').find('.totalQuantity').val();
        st = st + (up * q);
    });
    $('#totalAmount').text(st);
});