Fields added with .clone().appendTo are not available in post of form

[eluser]iamzvonko[/eluser]
Hello,

This may be more of a jQuery question but I'm using it in a CodeIgniter site so I thought I'd start here. I'm trying to finish up something another person started so I was trying to follow his initial design. If anyone has other suggestions I'm open to to those too. The thing is, deadline looming and I don't want to start from scratch if the fix is easy.

The intent is for the page to start with ONE row with 4 input fields: start date, start time, end date and end time. The user can click a button to add another row with the same 4 fields. Here's the HTML snippet for that part. The "timeperiod" div is the first row. The "newRow" div is hidden but will be cloned and appended to first area when user clicks a button.

Code:

<tr>
  <td align="right" valign="top">Trip Period</td>
  <td colspan="3">
  <div id="newRow">
  <table width="100%" border="0" cellpadding="0" cellspacing="0"
    class="timeperiod">
    <tr>
      <td>&lt;input type="text" id="start_dayNEW" /&gt;&lt;/td>
      <td>&lt;input type="text" id="start_timeNEW" /&gt;&lt;/td>
      <td>&lt;input type="text" id="end_dayNEW" /&gt;&lt;/td>
      <td>&lt;input type="text" id="end_timeNEW" /&gt;&lt;/td>
      <td rowspan="2" valign="top">&nbsp;</td>
      <td rowspan="2" valign="top"><a href="#" class="remove_row"><img
        src="&lt;?php echo
      base_url();?&gt;assets/images/trash.png" /> </a></td>
    </tr>
    <tr>
      <td valign="top"><small>Start Day</small></td>
      <td valign="top"><small>Start Time</small></td>
      <td valign="top"><small>End Day</small></td>
      <td valign="top"><small>End Time</small></td>
    </tr>
  </table>
  </div>
  <div id="timeperiod">&lt;input type="text" value="2" id="rowCounter"
    name="rowCounter"&gt;
  <table width="100%" border="0" cellpadding="0" cellspacing="0"
    class="timeperiod">
    <tr>
      <td>&lt;input type="text" id="start_day_1" name="startday_1" /&gt;&lt;/td>
      <td>&lt;input type="text" id="start_time_1" name="starttime_1" /&gt;&lt;/td>
      <td>&lt;input type="text" id="end_day_1" name="endday_1" /&gt;&lt;/td>
      <td>&lt;input type="text" id="end_time_1" name="endtime_1" /&gt;&lt;/td>
      <td rowspan="2" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td valign="top"><small>Start Day</small></td>
      <td valign="top"><small>Start Time</small></td>
      <td valign="top"><small>End Day</small></td>
      <td valign="top"><small>End Time</small></td>
    </tr>
  </table>
  </div>
  <div>input onclick="addNewTime();"
    type="button" class="btn" value="Add New Period" id="btnSubmit"
    style="height: 25px;"></div>
  </td>
</tr>

Here's the script executed when the user clicks on the Add New Period button:

Code:

function addNewTime() {
  var counter = parseInt($("#rowCounter").val());
  $("#newRow").children().clone().appendTo($("#timeperiod")).find(
      '#start_dayNEW').attr("id", "start_day_" + counter).attr("name",
      "startday_" + counter).end().find('#start_timeNEW').attr("id",
      "start_time_" + counter).attr("name", "starttime_" + counter).end()
      .find('#end_timeNEW').attr("id", "end_time_" + counter).attr(
          "name", "endtime_" + counter).end().find('#end_dayNEW')
      .attr("id", "end_day_" + counter).attr("name", "endday_" + counter)
      .end();
  $('#start_day_' + counter).datepicker( {
    dateFormat : 'yy-mm-dd',
    minDate : 0
  });
  $('#start_time_' + counter).ptTimeSelect();
  $('#end_day_' + counter).datepicker( {
    dateFormat : 'yy-mm-dd',
    minDate : 0
  });
  $('#end_time_' + counter).ptTimeSelect();
  counter += 1;
  $("#rowCounter").val(counter);
};

The script works fine. User clicks on button and a new row is added. The fields show up fine and their id and name attributes are named properly. However, when I submit the form the new fields are not available in my CI code. When I do this in my code I get the value back from the start_day_1 field.

Code:

$startDay = $this->input->post('start_day_1');

However, if I do the exact same statement but for start_day_2 I get nothing. Even though I verified that the field is on the form (with correct name and id attribute) and I put a value in it.

Code:

$startDay = $this->input->post('start_day_2');

Is there something special I have to do with fields that are added to the form using "...clone().appendTo(..." process in order for their values to be posted back to server?

Thanks in advance for any help.

David