calculate the value of the form array directly with jquery

[Scaper123]

I have a problem and this is the scenario. I have a dynamic form that when clicked on the "tambah" then the form will grow. the value of the form I took from the database using autocomplete typehead bootstrap, so that when one form is loaded with the value of the autocomplete then another form will come loaded by the database row. after I filled out a few lines of the form, then the number of the form "harga-makanan" calculated by jquery.. Here I've made html, javascript autocomplete and dynamic form them.html\[code\]<table class="table table-striped area-table tabel-form-makanan"> <thead> <tr> <th>Nama Makanan</th> <th>Jenis Makanan</th> <th>Harga Makanan</th> </tr> </thead> <tbody> <tr> <td> <input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/> <input type="hidden" name="id-makanan[]" class="id-makanan"/> </td> <td> <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/> </td> <td> <input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/> </td> <td> <a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a> </td> </tr> </tbody></table> /////////////////////////other statement<table> <tr> <td style="width: 100px;"><label><b>Subtotal</b></label></td> <td><input type="text" readonly name="subtotal" class="subtotal" style="height: 30px; width: 160px; text-align: right;"></td> </tr> <tr> <td><label><b>Diskon</b></label></td> <td> <input type="text" readonly name="diskon" class="diskon" style="height: 30px; width: 160px; text-align: right;"> </td> </tr> <tr> <td><label><b>Total</b></label></td> <td><input type="text" readonly name="total" class="total" style="height: 30px; width: 160px; text-align: right;"></td> </tr> <tr> <td><label><b>Bayar</b></label></td> <td><input type="text" name="bayar" class="bayar" style="height: 30px; width: 160px; text-align: right;"></td> </tr> <tr> <td><label><b>Kembali</b></label></td> <td><input type="text" readonly name="kembali" class="kembali" style="height: 30px; width: 160px; text-align: right;"></td> </tr></table><button type="submit" class="btn btn-primary" style="float: right;">Simpan</button>\[/code\]javascript dynamic form\[code\]$('.tombol-tambah-makanan').on('click', function(){ var tr = '<tr>\n\ <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\ <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\ <td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\ <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\ </tr>'; $("table.tabel-form-makanan tbody").append(tr); });\[/code\]and autocomplete typehead bootstrap\[code\] $(".nama-makanan:last").live('focus', function() { $(this).typeahead(autocompleteMakanan); }); var autocompleteMakanan = { source: function(query, process) { $.ajax({ type: "post", url: "<?php echo base_url('pembayaran/jsoncaridatamakanan'); ?>", data: "search=" + query, dataType: "json", success: function(data) { labels = []; mapped = {}; $.each(data, function (i, item) { var data = http://stackoverflow.com/questions/14063582/item.nama_makanan; mapped[data] = item; labels.push(data); }) process(labels); } }); }, minLength: 1, html: true, updater: function (data) { var makanan = mapped[data]; var hasil = makanan.nama_makanan; $(".id-makanan:last").val(makanan.id_makanan); $(".nama-jenis-makanan:last").val(makanan.nama_jenis_makanan); $(".harga-makanan:last").val(makanan.harga_makanan); return hasil; } };\[/code\]jquery to count, but failed to display the results directly\[code\]var inputHargaMakanan = "input[class=harga-makanan]";$(inputHargaMakanan).bind('keyup', function(){ var totalMakanan = 0; $(inputHargaMakanan).each(function(){ if(this.value != ''){ totalMakanan += parseInt(this.value, 10); } }); $('.subtotal').val(totalMakanan); console.log('Nilai dari total makanan: '+totalMakanan);});\[/code\]the problem is when I input data in dynamic form, which accounted for only 1 line only, not the number of rows of the dynamic form. than the value of the form "harga-makanan" does not appear in the form "subtotal" directly, only appears when typed through the keyboard.how the solution to the above problem, I need all your help. thank you