Why For loop not working in javascript using keyup function?

Question

When i enter the amount in the text box it goes to function and not working for loop.

I have one table it shows multiple dynamic rows.

Rows count only count.value in function(javascript)

And then because of this multiple row only i want loop to add price (rec_qty*porate)

HTML

<?php
$table=mysql_query("SELECT * from purchase_order");
while($table1=mysql_fetch_array($table))
{   
  $i++;

<tr>
<td><input type="hidden" id="tatalrecord" value="<?php echo $i;?>"></td>
<td><input type="text" style="width:45px" class="form-control rec_qty" onkeyup="myFunction()" id="rec_qty"></td>

<td><input type="text" style="width:45px" class="form-control porate" onkeyup="myFunction()" id="porate"></td>
</tr>
<?php } ?>
</table>

JAVASCRIPT

function myFunction() {
  var count = document.getElementById("tatalrecord");
  var cn = count.value;
  alert(count.value);
    for(var i = 0; i < cn; ++i)
    {
      alert("hi");
      var x = document.getElementById("rec_qty");
      var y = document.getElementById("porate");
      var z = x.value * y.value;
    } 
 }

Answer 1

<table>
<tr>
<td> Price </td>
<td> Quantity </td>
<td> Total  </td>
<tr>
<?php  
  $table = mysql_query("select * from table_name");
  $i=0;
  while($row = mysql_fetch_array($table))
  {
?>
  <tr>
  <td> <input type="hidden" id="tatalrecord" value="<?php echo $i; ?>"></td>
  <td> <input type="text" id="porate<?php echo $i; ?>" onkeyup="myFunction()" value="<?php echo $i; ?>"></td>
  <td> <input type="text" id="rec_qty<?php echo $i; ?>" onkeyup="myFunction()" value="<?php echo $i; ?>"></td>
  <td> <input type="text" readonly="" id="total"> </td>
  </tr>
}
</table>

Javascript

function myFunction() {
  var z = 0;
  var count = document.getElementById("tatalrecord");
  var cn = (count.value) ? parseInt(count.value) : 0;
  alert(cn);
  for (var i = 1; i <= cn; ++i)
  {
     var x = document.getElementById("rec_qty"+i);
     var y = document.getElementById("porate"+i);
     z = parseInt(x.value) * parseInt(y.value);
  }
}