Method call function in a table row clone editable

Question

I have cloned the rows in my table editable.

The rows have 2 column editable, 1 with editable textarea and the other one with an input numer.

There is a function which sum the numbers in the two input numbers and give the total. You can try here, there is onblur : "submit"

I have cloned both Rows, they are editable but the function to calculate the Total does not work in the rows cloned.

How can i make my function working in the cloned rows?

Answer 1

you are cloning rows with id="sum", and you should not have duplicated ids in your page.

when i have to clone elements i generate dynamic ids so they don't get duplicated.

like this:

var lastid = $('[id^="clonedInput"]').length + 1;
$(".clonedInput").last().clone().attr('id', 'clonedInput' + lastid).appendTo("body")

you can test a full working example here: http://jsfiddle.net/RASG/MjMh5/

also, your jsfiddle is a total mess. please keep only the relevant code.

EDIT

ok, so you have other problems as well.
for instance, your function tally does not sum the cloned rows.
this function (not mention your whole code) could be a lot simpler.

function tally() {
    var total = 0;
    $('p.editable_number').each(function() {
        total += parseInt($(this).text()) || 0;
        $('#total').html(total);
    })
}

test it here: http://jsfiddle.net/RASG/MA78A/