How to make subtotal for each row in JavaScript?

Question

I want to make a subtotal for each products that I have. I already create the codes and it's working well, but the problem is if there are two or more products, the price will only change the first product, not the second and the rest. So, how to make it dynamically with the rest of the product? Here's my code.

    function priceTotal(value) {
        var grandTotal = 0;
        $('.subtotal').each(function() {
            var qty = value;
            var price = parseInt($('.price').text());
            var subTotal = value * price;
            grandTotal = grandTotal + subTotal;
            // document.getElementById("subtotal").innerText = "Rp. " + subTotal.toLocaleString('en');
            $(this).text("Rp. " + subTotal.toLocaleString('en'));
        });
        // document.getElementById("grandtotal").innerText = "Rp. " + grandTotal.toLocaleString('en');
        $('.grandtotal').text("Rp. " + grandTotal.toLocaleString('en'));
    }

    $('.increment-btn').click(function(e) {
        e.preventDefault();
        var incre_value = $(this).parents('.quantity').find('.qty-input').val();
        var value = parseInt(incre_value, 10);
        value = isNaN(value) ? 0 : value;
        if (value < 100) {
            value++;
            $(this).parents('.quantity').find('.qty-input').val(value);
        }

        priceTotal(value);
    });

    $('.decrement-btn').click(function(e) {
        e.preventDefault();
        var decre_value = $(this).parents('.quantity').find('.qty-input').val();
        var value = parseInt(decre_value, 10);
        value = isNaN(value) ? 0 : value;
        if (value > 1) {
            value--;
            $(this).parents('.quantity').find('.qty-input').val(value);
        }

        priceTotal(value);
    });

                    <table class="table">
                        <thead class="bg-transparent">
                            <tr>
                                <th scope="col" class="text-center">Thumbnail</th>
                                <th scope="col" class="text-center">Brand</th>
                                <th scope="col" class="text-center">Product</th>
                                <th scope="col" class="text-center">Size</th>
                                <th scope="col" class="text-center">Price</th>
                                <th scope="col" class="text-center">Quantity</th>
                                <th scope="col" class="text-center">Subtotal</th>
                                <th scope="col" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        @foreach($cartlists as $cartlist)
                        <tbody class="bg-transparent" class="checkout_cart">
                            <tr class="cartpage">
                                <td class="text-center"><img src="{{asset('uploads/products/' . $cartlist->product->productimage)}}" width="100px;" height="100px;" alt="Image"></td>
                                <td class="text-center">{{$cartlist->product->brand->name}}</td>
                                <td class="text-center">{{$cartlist->product->productname}}</td>
                                <td class="text-center">{{$cartlist->product->productsize}}</td>
                                <td class="text-center">Rp. <span class="price" data-price="{{$cartlist->product->productprice}}">{{ $cartlist->product->productprice}}</span></td>
                                <td class="cart-product-quantity text-center" width="132px">
                                    <div class="input-group quantity">
                                        <div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
                                            <span class="input-group-text">-</span>
                                        </div>
                                        <input type="text" class="qty-input form-control text-center" maxlength="2" value="1">
                                        <div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
                                            <span class="input-group-text">+</span>
                                        </div>
                                    </div>
                                </td>

                                <td class="text-center">
                                    <span class="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
                                </td>
                                <td class="text-center">
                                    <a href="/product-cart/delete/{{$cartlist->id}}" class="d-inline btn btn-danger">Delete</a>
                                </td>
                            </tr>
                        </tbody>
                        @endforeach
                    </table>
                </div>
                <div class="text-left mt-3">
                    <h5 class="bold">Total: <span class="grandtotal"></span></h5>
                    <p>Delivery and discount will be calculated during the checkout process.</p>
                </div>

Here's the result:

Answer 1

ID has to be unique, you have the same id="subtotal" in every row. Change it for class.

JS

function priceTotal(value) {
        var grandTotal = 0;
        $('.subtotal').each(function() {
      //  ^^
            var qty = value;
            var price = parseInt($("#price").text());
            var subTotal = value * price;
            grandTotal = grandTotal + subTotal;
            $(this).text("Rp. " + subTotal.toLocaleString('en'));
        //  ^^^^^^^ $(this) instead of document.getElementByid
        });
        document.getElementById("grandtotal").innerText = "Rp. " + grandTotal.toLocaleString('en');
    }

HTML

<td class="text-center">
    <span class="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>

The same problem will be with other IDs in your foreach loop. There are #price and #qty-input.