Jquery add to table using form inputs with [] in name
<p>I'm using a very helpful jquery script I found to add rows to my table. Each row contains form fields. I'd like each row to be passed as an array so I tried using name[] as the input name/ids but this seems to break the jquery. Does anyone know a way around this? or a better way for me to pass the data.</p>

<pre><code>&lt;button id='addRow'&gt;Add Row&lt;/button&gt;
&lt;table class="display zebra"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope="col"&gt;Payment Amount&lt;/th&gt;
            &lt;th scope="col"&gt;Payment First Date&lt;/th&gt;
            &lt;th scope="col"&gt;Number of Payments&lt;/th&gt;
            &lt;th scope="col"&gt;Payment Regularity&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr name='row1' id='row1'&gt;
            &lt;td&gt;&lt;?php echo form_input(array('name' =&gt; '1[amount]','id' =&gt;'1[amount]')); ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="date" name="1[datepick]" id="datepick1" value=""&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo form_dropdown("1[number_payments]", $payment_num_dropdown,0,"id='number_payments1'"); ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo form_dropdown("1[payment_regularity]", $payment_reg_dropdown, 'monthly',"id='1[payment_regularity]'"); ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt; 

$(document).ready(function($)
{
  // trigger event when button is clicked
  $("button").click(function()
  {
 // add new row to table using addTableRow function
 addTableRow($("table"));

 // prevent button redirecting to new page
 return false;
});

// function to add a new row to a table by cloning the last row and
// incrementing the name and id values by 1 to make them unique
function addTableRow(table)
{
 // clone the last row in the table
 var $tr = $(table).find("tbody tr:last").clone();

// get the name attribute for the input and select fields
$tr.find("input,select").attr("name", function()
{
  // break the field name and it's number into two parts
  var parts = this.id.match(/(\D+)(\d+)$/);

  // create a unique name for the new field by incrementing
  // the number for the previous field by 1
  return parts[1] + ++parts[2];
// repeat for id attributes
}).attr("id", function()
{
  var parts = this.id.match(/(\D+)(\d+)$/);
  return parts[1] + ++parts[2];
});

var rowname = $tr.attr("name");
var rowparts = rowname.match(/(\D+)(\d+)$/);

$tr.attr("name",rowparts[1] +  ++rowparts[2]);
$tr.attr("id",rowparts[1] +  rowparts[2]);

console.log($tr.find("td:last-child").html("&lt;a href='#' onclick='remove\("+rowparts[2]+"); return false;'&gt;Remove&lt;/a&gt;"));     
// append the new row to the table
$(table).find("tbody tr:last").after($tr);
};
});
</code></pre>

<p>I know the jquery won't work as is but if anyone could tell me how to handle passing the [] to the function a can work the rest out.  </p>

<p>The error I get is something along the lines of "Can't read properly 1 of null".</p>
