[jQuery] Cloning a table row and changing its form field IDs

[Matt]

Hi everyone.

I'm writing a dynamic form that allows users to add fields. These
fields are contained in a table.

I have this function to clone the rows (my table has an ID of
EventType)

function addEventType()
{
        var clonedRow = $("#EventType tr:last").clone();

        $("input", clonedRow).attr('value', ''); // reset the form values
        $("input:checked", clonedRow).attr('checked', ''); // uncheck any
checked boxes

        $("#EventTypeID").append(clonedRow);
        $(".datepicker").datepicker(); // reset the datepicker widget
        $(".datepicker").removeClass('hasDatepicker').datepicker();
}

This gets more complicated because I'm using a Datepicker - this needs
each <input> using the widget to have a unique ID. I've tried for a
few hours now to find some way to give the cloned row's <input>s
unique IDs, but I'm getting nowhere. I tried setting a hidden form
field that counted the current ID, then incremented it for the new
rows, but I can't seem to get this to work.

Can anyone point me in the right direction for incrementing the IDs of
the fields that are cloned? My HTML looks like this for each row:

  <tr>
    <td><input type="text" name="Title" /></td>
    <td><input type="text" class="datepicker" size="11" id="picker_1" /
></td>
    <td><input type="text" class="datepicker" size="11" id="picker_2" /
></td>
    <td><input type="checkbox" name="Active" /></td>
  </tr>

Matt