How my jQuery function work on whole table? - php

Question

I have a problem in my code. My jQuery code is only implement of the first row of table not on others. Here is my code:
<tr>
<td><?php echo $row['serial no.'] ?></td>
<td><?php echo $row['pname'] ?></td>
<td><input type="text" class="form-control" id="prate" name = "uprice" value="<?php echo $prate = $row['uprice'];?>"></td>
<td> <input type="number" class="form-control" id="pqty" name = "quantity" value ="<?php $quant = ""; echo $quant; ?>"></td>
<td> <input type="text" class="form-control" id="pTotal" name = "price" value = "<?php $tprice = ""; echo $tprice; ?>" ></td>
</tr>
This is my HTML code:
<script>
$("#prate").keyup(function(){
// console.log('presssed');
var prate = document.getElementById('prate').value;
var pqty = document.getElementById('pqty').value;
var ptotal = parseInt(prate) * parseInt(pqty);
document.getElementById('pTotal').value = ptotal;
});
$("#pqty").keyup(function(){
// console.log('presssed');
var prate = document.getElementById('prate').value;
var pqty = document.getElementById('pqty').value;
var ptotal = parseInt(prate) * parseInt(pqty);
document.getElementById('pTotal').value = ptotal;
});
</script>
What can I try to resolve this?

Answer 1

What you have to do is (1) Gather all those classes in a Variable. (2) Run Foreach loop on each element. (3) While looping each element, you must sum all of these elements' values.
// Step 1: Fetch Classes
var FetchedClasses = document.getElementsByClassName("myclass");
var Sum = 0;
// Step 2: Iterate them
Array.prototype.forEach.call(FetchedClasses, function(element) {
// Step 3: Sum up their values
Sum = Sum + element.value; //
});
// Now Show it anywhere you like.

Answer 2

Use class selector (not id selector) and each method to emplement your desired commands on all rows.

Answer 3

ID must be unique, instead put a class as a reference for each table data and try each method:
$('.pqty').each(function(i, element){
$(element).keyup(function(evt) {
/* anything */
})
})

Answer 4

As you know, id must be unique on whole page. So on each row and items, either you have make unique id (Which will be complicated to bind event), so you can go with class or as below script for binding the events.
<script>
$('input[name="uprice"]').keyup(function(){
var prate = $(this).val();
var pqty = $(this).parent().next().find('input[name="quantity"]').val();
var ptotal = parseInt(prate) * parseInt(pqty);
$(this).parent().next().next().find('input[name="price"]').val(ptotal);
});
$('input[name="quantity"]').keyup(function(){
var prate = $(this).parent().prev().find('input[name="uprice"]').val();;
var pqty = $(this).val();
var ptotal = parseInt(prate) * parseInt(pqty);
$(this).parent().next().find('input[name="price"]').val(ptotal);
});
</script>
Not have tested but should help you.