Dynamic generated form with event keyup each separate actions
<p>Well, I have a form and want to generate new forms equal starting from a parent form, and wish that each of these forms display what is typed on the form forward in a <code>p</code>, but when I do that the event propagates to all elements was dynamically generated. I just wanted it to propagate the corresponding form.</p>

<p>I am currently using the following code:</p>

<p>JS</p>

<pre><code>jQuery(function(){
$(document).on('keyup','#il',function(){
$('p').append($(this).val());
})
$(document).on('click', '#btn',function(){
$("#in").append('&lt;form&gt;
&lt;input id="il" type="text" size="20%"&gt;
&lt;button id="btn" type="button"&gt;ADD&lt;/button&gt;
&lt;p&gt;&lt;/p&gt;&lt;br /&gt;
&lt;/form&gt;');
});
})
</code></pre>

<p>HTM</p>

<pre><code>&lt;div id="in"&gt;
&lt;form&gt;
&lt;input id="il" type="text" size="20%"&gt;
&lt;button id="btn" type="button"&gt;ADD&lt;/button&gt;
&lt;p&gt;&lt;/p&gt;&lt;br /&gt;
&lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p><strong><a href="http://jsbin.com/opehuh/1/edit" rel="nofollow">JS Bin</a></strong></p>
