Deleting any element, the reassigning the count value
<p>Sorry about the cryptic title, it's hard to describe!</p>

<p>I am using the following script to add a row to my form when a button is clicked:</p>

<pre><code>  $(document).ready(function() {
      $('#btnAdd').click(function() {
     var num     = $('.clonedInput').length;
     var newNum  = new Number(num + 1);

     var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

     newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
     $('#input' + num).after(newElem);
        $('#btnDel').attr('disabled','');

        if (newNum == 5)
         $('#btnAdd').attr('disabled','disabled');
      });

      $('#btnDel').click(function() {
     var num = $('.clonedInput').length;

     $('#input' + num).remove();
     $('#btnAdd').attr('disabled','');

     if (num-1 == 1)
      $('#btnDel').attr('disabled','disabled');
      });

      $('#btnDel').attr('disabled','disabled');
  });
</code></pre>

<p>This works absolutely fine, but it's not very user-friendly that you can only delete the last added row. Say I want to delete a row added earlier on, I would have to delete everything I'd done since then.</p>

<p>How can I delete any row, and at the same time reassign the count value to the other rows, so that the count is still sequential (i.e. Row1, Row2, Row3 etc, rather than Row1, Row5, Row8)?</p>
