jquery - why the last Value Row values are repeated for the HTML Table -

i have static html table contains 1 button "add" , when clicking on button creates new row contains text boxes , append table .but problem have 3 rows , when click "add" able create new row previous row values copied in new row being generated .here function iam using

    $('#btn1').click(function(){         tr= $("#tbl tr:last").html();         num= $('#num').val()*1;         first= $("#tbl tr:last").attr('id').substr(4)*1;         last=first+num;         for(i=first+1;i<=last;i++) {             var newtr= tr.replace(first,i);             $('#tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>');         }        }); 

how make value selected "abc" in select box when new row being added.iam using statement did not workout .how can make value selected

$('#tbl tr:last :input').find('input[name="code"]').val('abc');  

as @patrick points out, may copying in values last row. why not clear them out after create new row? after loop:

$('#tbl tr:last :input').val(''); 

this should select input fields in last tr of #tbl table , remove values them. select last row, see you're adding variable number of rows, lets handle properly.

since you're appending bunch of rows, why not clean them add them?

for(i=first+1;i<=last;i++) {     var newtr= tr.replace(first,i);     $('#tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>').find(':input').val(''); } 

that should handle many rows can add.