Looping in Laravel Blade with Javascript to set the id of a text input type

I'm new to web programming and I'm sorry if this question is silly or confusing. I've been searching for the answer and I tried a few but nothing worked. So what I want to do is to show data from a variable sent from controller with Javascript. 5 row with looping. One row is working fine (before I put it into the loop).

I'll just send the code because I can't really put it into words. The script is inside the blade file because I can't seem to make it work with external Javascript file.

Controller

$produk = Produk::select()->get();
return view('notajual.tambah-nota-jual', compact('produk');

Blade

                            @for($i=1;$i<=5;$i++)
                            <tr>
                                <td></td>
                                <td><input type="text" id="php?> ${'produk'.$i} ?>" onkeyup="getproduct()"/></td>
                                <td><input type="number" id="php?> ${'jumlah'.$i} ?>" onkeyup="getsubtotal()"/></td>
                                <td class="right"><label id="php?> ${'harga'.$i} ?>"></label></td>
                                <td class="right"><label id="php?> ${'subtotal'.$i} ?>"></label></td>
                            </tr>
                        <script type="text/javascript">
                            function getproduct(){
                                var nama = document.getElementById('produk'.$i).value;
                                var produk = {!! json_encode($produk->toArray()) !!};
                                var harga;
                                for (i = 0; i < produk.length; i++) {
                                    if(nama===produk[i]['namaProduk'])
                                        // return produk[i]['hargaJual'];
                                        document.getElementById('harga'.$i).innerHTML = produk[i]['hargaJual'];
                                }
                            }

                            function getsubtotal(){
                                var jum = document.getElementById('jumlah'.$i).value;
                                var hargaJual = parseFloat(document.getElementById('harga'.$i).innerHTML);
                                var total = jum*hargaJual;
                                // return total;
                                document.getElementById('subtotal'.$i).innerHTML = total;
                            }
                        </script>
                    @endfor

What I expect (the id of the input):

Say, in database I have 'produka' with hargaJual = 5.

If I type produka in produk1 and 3 in jumlah1, value of harga 1 will be 5, and value of subtotal1 will be 15.

via Chebli Mohamed