title: Jquery dynamically added rows do not allow saved data
body: <p>I have a form that has a button that allows form fields to be dynamically added.  The form itself saves data fine, but when I add rows, the data is saved fine EXCEPT for checkbox data.  If I add the rows, save the form, then reopen and apply checkboxes, it works though.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>//adds extra table rows
  var i=$('table tr').length;
  $(".addmore").on('click',function(){
      addNewRow();
  });
  
  $(document).on('keypress', ".addNewRow", function(e){
      var keyCode = e.which ? e.which : e.keyCode;
      if(keyCode == 9 ) addNewRow();
  });
  
  var addNewRow = function(){
  html = '&lt;tr&gt;';
  html += '&lt;td&gt;&lt;input type="checkbox" name="data[InvoiceDetail][0][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"&gt;&lt;/td&gt;';
  html = '&lt;/tr&gt;';
  $('table').append(html);
  $('#caseNo_'+i).focus();
  i++;
  }
  
  //to check all checkboxes
  $(document).on('change','#check_all',function(){
      $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
  });
  </code></pre>
  
  <p>Table data pertaining to form :</p>
  
  <pre><code>&lt;?php if(isset($invoice['InvoiceDetail'])&amp;&amp;!empty($invoice['InvoiceDetail'])){?&gt;
                                      &lt;?php foreach ( $invoice['InvoiceDetail'] as $key=&gt;$item){?&gt;
                                          &lt;tr id="tr_&lt;?php echo $key+1?&gt;"&gt;
                                              &lt;td&gt; &lt;input class="case" type="checkbox"/&gt; &lt;/td&gt;
                                              &lt;td class="prod_c"&gt;
                                              &lt;td&gt;&lt;input type="checkbox" &lt;?php if(isset($item['added']) &amp;&amp; $item['added'] == 1) echo "checked=\"checked\""?&gt; data-type="checkbox" name="data[InvoiceDetail][&lt;?php echo $key;?&gt;][added]" id="added_&lt;?php echo $key+1?&gt;" class="form-control autocomplete_txt" autocomplete="off"&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
  </code></pre>
  
  <p>Button to call event :</p>
  
  <pre><code>&lt;div class='row'&gt;
                      &lt;div&gt;
                          &lt;button class="btn btn-danger delete" type="button"&gt;- Delete&lt;/button&gt;
                          &lt;button class="btn btn-success addmore" type="button"&gt;+ Add More&lt;/button&gt;
                          &lt;button class="btn btn-success copy" type="button"&gt;Copy Selected&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Working Code :</p>
  
  <pre><code>html += '&lt;td&gt;&lt;input type="checkbox" name="data[InvoiceDetail]['+i+'][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"&gt;&lt;/td&gt;';
  </code></pre>