jQuery form elements not loaded dynamically
<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>