jQuery attaching a form dynamically

I am trying to attach a form to a div when a user clicks on a link. I've written sam开发者_开发技巧ple code which accomplishes my mission, however, I want to know how to prevent the function from making multiple iterations of the form.

Here is my code:

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

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

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:

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

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".

I think I'm on the right track, but I could use some help.

Thank you in advance.

Remove the inline event handlers (they are bad practice, and you really don't need them, especially when you're using jQuery) and give your links a class:

<a href="#" class="formLink">

Then use the following jQuery:

$(".formLink").one("click", function() {
   $("#oneForm").remove();
   $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'">  <input type="button" name="myButton" value="Test" /></form></div>'); 
}); 

This attaches a click event handler to all elements with class "formLink", which will only run once (that's the point of the one method). Inside the event handler, you can use the after method to insert your content after the clicked element, and the remove method to remove the previously added (if any) element.

Here's a working example.

Update

I'm not actually 100% sure if the above does precisely what you want (if you click one link, then another, you can't click the first link again). If you want to be able to do that, use this instead (a plain old click event handler, not the one method):

$(".formLink").click(function() {
    $("#oneForm").remove();
    $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'">  <input type="button" name="myButton" value="Test" /></form></div>'); 
}); 

Here's another example for this version.

Remove it first:

function moveForm(element) {
  $('#oneForm').remove()
  $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}

Remove oneForm each time:

Here is a jsFiddle for it.

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
    function moveForm(element) {

        $('#oneForm').remove();   

        $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}
</script>

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