Question

I have a table in which i append rows on onclick event, the row has a button which enables you to delete it … this works fine. The problem comes when i have inserted some rows e.g 5 rows, and i delete any row btwn the 1st and last row then add two consecutive rows , the last row is duplicated with the counter value of the previous row.

my question is, how do i get to get the value of the final row appended so i can increment it to any row i add without creating duplicate values

here is the code

HTML

<form action = '' method = 'post' id = 'resume_form'>        

<table id="work" width="100%" border="0" cellspacing="0" cellpadding="0" style="color:#FFFFFF" >
  <tr bgcolor="#0000FF">
    <td width="4%">&nbsp;</td>
    <td width="76%"><strong>PARTICULARS</strong></td>
    <td width="20%"><strong>AMOUNT</strong></td>   
  </tr>
</table>               
<input type="button" id="button"  value="Add field" / >
</form>

JS

<script type="text/javascript">

    $('#button').click(function(){
        var count = $('input.dasa').length;
                //Html to create a new field       

              '<tr class = "work_experiance' + count + '">' +
                '<td></td>' +
                '<td><input class=\'dasa\' type="text" name="part' + count + '" id="part' + count + '" /></td>' +
                '<td><input type="text" name="amount' + count + '" id="amount' + count + '" /</td>' +

            '<td><input class="remove_project_file" onclick="del(\''+count+'\')"  type = "button"  id = "delete' + count + '" name = "delete' + count + '" onclick="del(' + count + ')" value="delete' + count + '">' +
            '</tr>';
        $('#work').append(newFields);
    });
    $('form').submit(function() {
        $.post('resume.php', $(this).serialize(),
            function(data) { alert(data); });
        return false;
    });


function del(count)
{
var count;
    if(count=='0')
    {
        $('#delete'+count+'').attrib('disabled','');
    }
    else
    {
        $('.work_experiance' + count + '').remove();
    }

}

</script>

Answer 1

Get your count from the last field instead, like this:

 var count = parseInt($('input.dasa:last').attr('id').replace('part',''),10) + 1;

This grabs the :last <input class="dasa" id="partNNN" /> and gets the count out of it by removing the "part" prefix then praseInt() on what’s left. Then we’re just adding 1 to that result for creating the next row.