I have a table that is being populated by the items from database. I use **foreach** to dynamically add rows for the next items. And also I use **jquery** to calculate the price and quantity per row but the problem is I can't make it work. here's my Code,

```
@php
    $counter = 0;
@endphp
@foreach($order->orderItems as $orderItem)
@php
    $counter++; 
@endphp
    <tr>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_code" id='product_code_{{$counter}}' name='product_code[]' for="1" value="{{ $orderItem->product_code }}" required/></td>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_name" id='product_name_{{$counter}}' name='product_name[]' for="1" value="{{ $orderItem->product_name }}" required/></td>
        <td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_{{$counter}}' name='cost[]' for="1" value="{{ $orderItem->cost }}" required/></td>
        <td><input class="form-control quantity" type='number' id='quantity_{{$counter}}' name='quantity[]' for="1" value="{{ $orderItem->quantity }}" required/></td>
        <td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' value="{{ $orderItem->total_cost }}" readonly/>
            <input class="form-control product_id" type='hidden' data-type="product_id" id='product_id_{{ $orderItem->id }}' name='product_id[]'/>
            <input class="form-control product_id" type='hidden' data-type="order_id" id='oder_id_{{ $orderItem->id }}' name='order_id[]' value="1" /></td>
        <td>
            @if ($counter % 1 == 0 && $counter > 1)
            @else
                <button type="button" name="add" id="add" class="btn btn-success circle"><i class="fas fa-plus-circle"></i></button>
            @endif
        </td>

        <script type="text/javascript">
            var calc = {{$counter}};

            function getTotalCost(calc) {
                var qty1 = $('#quantity_'+calc).val();
                var price1 = $('#product_price_'+calc).val();
                var totNumber1 = (qty1 * price1);
                var tot1 = totNumber1.toLocaleString("en-US", { maximumFractionDigits: 2});
                $('#total_cost_'+calc).val(tot1);
                calculateSubTotal1();
            }
            function calculateSubTotal1() {
                var grandtotal1 = 0;
                $('.total_cost').each(function() {
                    grandtotal1 += parseFloat($(this).val().replace(/,/g,''));
                });                    
                $('#grandtotal').val(grandtotal1.toLocaleString("en-US", { maximumFractionDigits: 2}));
            }
        </script>
    </tr>
@endforeach

```

Please help. Thank you so much in advance!