jquery each loop iterate only once on dynamically created element

Question

Here is my html

<tr>
     <td class="col-md-1 text-center" >  +sr+  </td>
     <td class="col-md-4 text-center" > + name + </td>
     <td id="tblprc" class="col-md-1 text-center" >' + price + </td>
     <td class="col-md-2 text-center" ><div class="form-group">
            <input type="text" class="form-control text-center" id="txtqty" 
              onkeypress="return isNumberKey(event);">
        </div></td>
        <td id="total" class="col-md-1 text-center" >0</td>
 </tr>

here is my jquery

$(document).on("change", "#txtqty", function () {

        var qt = $(this).val();
        var prc = $(this).parents("tr").find("#tblprc").text();

        qt*1;
        var amount = prc*qt;
        //$(this).parents("tr").find("#total").empty();
        $(this).parents("tr").find("#total").text(amount);
        var sum = 0;
        var xzone = $("#total");
        $.each(xzone,function (index,val) {
            var x = val.innerText;
            alert(index+":"+ val.innerText);
            sum = sum + parseInt(x);

        $("#sum-up").text(sum);
        });

    });

1- I am adding data and rows in the table dynamically. 2- On text change I am looping each loop on td element but it brings only first value.

Please identify the problem. It would be highly appreciated.