jQuery attaching a form dynamically
<p>I am trying to attach a form to a div when a user clicks on a link. I've written sample code which accomplishes my mission, however, I want to know how to prevent the function from making multiple iterations of the form. </p>

<p>Here is my code:</p>

<pre><code>&lt;script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script language="javascript" type="text/javascript"&gt;
    function moveForm(element) {
        $("#"+element).append('&lt;div id="oneForm"&gt; &lt;form name="myForm" id="myForm" method="post" action=""&gt;&lt;input type="text" id="'+element+'"&gt;  &lt;input type="button" name="myButton" value="Test" /&gt;&lt;/form&gt;&lt;/div&gt;');
}
&lt;/script&gt;

&lt;div style="border-color:black; border-style:dashed;"&gt;
&lt;div id="myItem_1"&gt;
Item #1 &lt;a href="javascript:moveForm('myItem_1')"&gt;View Form&lt;/a&gt;
&lt;/div&gt;
&lt;div id="myItem_2"&gt;
Item #2 &lt;a href="javascript:moveForm('myItem_2')"&gt;View Form&lt;/a&gt;
&lt;/div&gt;
&lt;div id="myItem_3"&gt;
Item #3 &lt;a href="javascript:moveForm('myItem_3')"&gt;View Form&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>As you can see, the code above works, but when you click on any of the 'View Form' links, the form appears an infinite number of times and also appears for each element. I want the form to only appear one time, regardless of which 'View Form' link is clicked. I would also like the form to appear under the correct element, for example:</p>

<p>If I click on 'View Form' for Item #1, the form should appear under the words "Item #1".</p>

<p>If I then click on 'View Form' for Item #3, the form should appear under the words "Item #3", and should disappear for "Item #1".</p>

<p>I think I'm on the right track, but I could use some help.</p>

<p>Thank you in advance.</p>
