title: jQuery clone table row in form does not submit cloned fields
body: <p>Below is a simplified example that demonstrates the problem I am having. One hundred percent of code is posted below.</p>
  
  <p>Three files work together: testa.php, testb.php, and testc.js. (FWIW, testa.php could function as the index.php, but this is just a demo)</p>
  
  <hr>
  
  <p>OVERVIEW:</p>
  
  <p>TESTA.PHP</p>
  
  <ul>
  <li>When user clicks anchor tag, sends value to testb.php</li>
  <li>Receives ajax response from testb.php into div #reportstable, within FORM structure</li>
  <li>Form is submitted to itself, so it prints $_POST data  - </li>
  </ul>
  
  <p>TESTB.PHP</p>
  
  <ul>
  <li>receives value from TESTA.PHP, via ajax</li>
  <li>outputs table that corresponds to received values</li>
  <li>(In this example, I removed how received value is used, but still retained this structure as it affects the jQuery in testc.js)</li>
  </ul>
  
  <p>TESTC.JS</p>
  
  <ul>
  <li>the jQuery that makes it (partially) work</li>
  </ul>
  
  <hr>
  
  <p><strong>PROBLEM 1: If user adds more than one "document" (i.e. row), only data for the last document appears in the POST data.</strong>.</p>
  
  <p><strong>PROBLEM2: DocTitle and FileName IDs (dt1, fn1) are not POSTED as they appear in the DOM. In the DOM, their IDs are incremented properly (dt11, dt12, dt13, etc) but when POSTed only one comes through and it has not been incremented.</strong> (Use firebug to inspect table elements after adding a couple of documents.</p>
  
  <p><strong>PROBLEM3: First click doesn't "take" when clicking the "choose file" anchor when adding a new document.</strong> Any thoughts on this one?</p>
  
  <hr>
  
  <p>TESTA.PHP</p>
  
  <pre><code>&lt;?php   
      If (empty($_POST)===false) {
          echo '&lt;pre&gt;';
          print_r($_POST);
          echo '&lt;/pre&gt;';
          die();
      }
  ?&gt;
  &lt;html&gt;&lt;body&gt;
  
  &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-custom-file-input.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="testc.js"&gt;&lt;/script&gt;
  &lt;br /&gt;
  
  Project*:&lt;br /&gt;
  &lt;a href="#" id="project_pick"&gt;Click Me&lt;/a&gt;
  
  &lt;form action="" method="post"&gt;
      &lt;div id="reportstable"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>TESTB.PHP</p>
  
  <pre><code>&lt;?php
      $project_id = $_POST['project_id'];
  
      if ($project_id == 5) {
          echo '
              &lt;table id="DocTable"&gt;
                  &lt;tr&gt;
                      &lt;th width="150"&gt;Document Title&lt;/th&gt;
                      &lt;th width="150"&gt;File Name&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr name="tr2" id="tr2" style="display:none;"&gt;
                      &lt;td&gt;&lt;input type="text" name="dt1" id="dt1"&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="hidden" name="fn1" id="fn1"&gt;
                          &lt;span id="sp1"&gt;&lt;a href="#" id="ah1"&gt;choose file&lt;/a&gt;&lt;span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br /&gt;
              &lt;a href="#" id="add_row"&gt;add document&lt;/a&gt;&lt;br /&gt;
              &lt;br /&gt;
              &lt;input type="submit" name="submit" id="submit_it" value="Submit"&gt;
          ';
      }
  </code></pre>
  
  <hr>
  
  <p>TESTC.JS</p>
  
  <pre><code>$(function(){
  
  var count = 1;
  //*******************************************************************    
  $('#project_pick').click(function(e) {
      $(this).hide();
      $.ajax({
          type: "POST",
          url: "testb.php",
          data: "project_id=5",
          success:function(data){
              $('#reportstable').html(data);
          }
      });
  });
  //*******************************************************************    
  $(document).on('click','#ah11',function() {
      $(this).file().choose(function(e, input) {
          $('#fn11').val(input.val());
          $('#sp11').html(input.val());
          $('#sp11').css('color','grey');
      });
  });
  //*******************************************************************    
  $(document).on('click','#ah12',function() {
      $(this).file().choose(function(e, input) {
          $('#fn12').val(input.val());
          $('#sp12').html(input.val());
          $('#sp12').css('color','grey');
      });
  });
  //*******************************************************************    
  $(document).on('click','#ah13',function() {
      $(this).file().choose(function(e, input) {
          $('#fn13').val(input.val());
          $('#sp13').html(input.val());
          $('#sp13').css('color','grey');
      });
  });
  //*******************************************************************    
  $(document).on('click', '#add_row', function() {
      $("table#DocTable tr:nth-child(2)")
          .clone()
          .show()
          .find("a, input, span, tr").each(function() {
              $(this)
                  .val('')
                  .attr('id', function(_, id) {
                      return id + count;
                      });
          })
          .end()
          .appendTo("table");
  
      count++;
      if (count == 4) {
          $('#add_row').prop('disabled', 'disabled');
      }
  }); //end fn add_row
  //*******************************************************************    
  $(document).on('click', '#submit_it', function() {
      alert('This will be submitted now');
  });
  //*******************************************************************
  });
  </code></pre>