how to count the values of the values of the dynamically added table rows using jquery

Question

hi i have a form which dynamically adds a table row from an external file when a user clicks on a add button and i even want to place a calculation on one of my fields which is qty i want to calculate the value of the qty and show the total so far i have written a code to calculate but it seem not to work can anybody help me
here is my script

          $(document).ready(function(){
                $('#detail').on('keyup', '.qty', calculateRow());
                $('#addnew').click(function(){

                    var ctr = $('#items').val();
                    ctr++;

                    $.post('job_srch.php', {ctr : ctr}, function(data) {
                          $(data).appendTo('#detail');

                          $('#items').val(ctr);                        
                    });
                });


function calculateRow() {
       alert("GAYA");
       console.log("2");
        var add = 0;
            $(".qty").each(function() {
                    add += parseFloat(this.value);
                        if (isNaN(add)) {
                            $('#total').val("0");
                                } else {
                                  $('#total').val(add.toFixed(2));
                                }

                });


}
   });

here is my php

<?php
session_start();
require("includes/dbconnect.php");
include ('includes/function.php');

$zdb = $_SESSION["zdbyear"];
mysql_select_db($zdb);

if ($_REQUEST["ctr"]){
    $ctr = $_REQUEST["ctr"];
    //echo '<link rel="stylesheet" href="css/chosen.css" />';
echo '<tr>

   <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_'.$ctr.'" class="form-input-oth"/></td>
   <td align="center"><select data-placeholder="Party" style="width:300px;" name="item_'.$ctr.'" class="chzn-select-deselect" >
                                  <option value=""></option>';
                      $res = mysql_query("SELECT * FROM `items`") or die(mysql_error());
                      while ($row = mysql_fetch_array($res)) {
                             echo "<option value='$row[accode]'>$row[name]</option>";
                      }
    echo '</select></td>';
    echo '<td align="center"><input type="text" id="qty" size="6" maxlength="9" maxlength="6" name="qty_'.$ctr.'" class="qty form-input-amt"/></td>

                      </tr>';
}
else{
    echo "ERROR";
}
 ?>

here is my table

            <table id="detail" border="1px" width="30%">
                  <tr>
                     <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Sr No.</font><span></span></label></td>
                     <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">item</font><span></span></label></td>
                     <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Quantity</font><span></span></label></td>
                  </tr>
</table>

Answer 1

Tthe first and most obvious error I found was that the command "add += parseFloat(this.value);" does not work.

The correct functions would be the following:

function calculateRow() {
   alert("GAYA");
   console.log("2");
   var add = 0;
   $(".qty").each(function() {
       add += parseFloat($(this).val()); // <-- changed from this.value
       if (isNaN(add)) {
           $('#total').val("0");
       } else {
           $('#total').val(add.toFixed(2));
       }
   });
}

You also have to change the following row from

$('#detail').on('keyup', '.qty', calculateRow());

to

$('#detail').on('keyup', '.qty', calculateRow);