title: jQuery form elements not loaded dynamically
body: <p>I'm not sure why, but when I call <code>$(form).serialize()</code> it returns object within dynamically created elements.</p>
  
  <p>I have this html syntax:</p>
  
  <pre><code>&lt;form id="form1"&gt;&lt;/form&gt;
  &lt;input type="text" name="formItem[0][value]" value="XX" /&gt;
  &lt;input type="text" name="formItem[INDEX][value]" value="XX" /&gt;
  </code></pre>
  
  <p>I call method to clone <code>input[name="formItem[0][value]"]</code> and replace <strong>INDEX</strong> with 1, so then I have form like this:</p>
  
  <pre><code>&lt;form id="form1"&gt;&lt;/form&gt;
  &lt;input type="text" name="formItem[0][value]" value="XX" /&gt;
  &lt;input type="text" name="formItem[1][value]" value="XX" /&gt;
  &lt;input type="text" name="formItem[INDEX][value]" value="XX" /&gt;
  </code></pre>
  
  <p>But then, when I call method to serialize form, there are still same count of elements -> two - but for this example:
  When I submit form for first time, with no cloned input, there was <code>formItem[0][value]</code> and <code>formItem[INDEX][value]</code>, but when I call clone and then submit form, <code>serializeArray</code> method return <code>formItem[0][value]</code> and <code>formItem[1][value]</code>.
  <a href="https://i.stack.imgur.com/yM7hW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yM7hW.png" alt="enter image description here"></a></p>
  
  <p>Do you have any idea, how to solve my problem?
  <a href="https://jsfiddle.net/8u83h22j/2/" rel="nofollow noreferrer">https://jsfiddle.net/8u83h22j/2/</a></p>