Having trouble adding input fields and buttons with JQuery to a form.

Having trouble adding input fields and buttons with JQuery to a form.

I am trying to create a form that has a menu name field for users to enter a name and under it has several buttons to expand this dynamically, one of which is adding another menu name field to the form without reloading the entire form. When I started i could click the plus sign once and one new menu name field would appear but the plus sign would no longer be clickable or it was and nothing was showing up on screen. I have watched the tutorials on lynda.com, read through whats on here and everything I try fails.

Here is the code I am using

--------------HTML----------------------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Creation</title>

<link href="_css/main.css" rel="stylesheet" type="text/css" media="all">


</head>

<body>
<header>Create Your Navigation</header>
<form action="" class="navCreator" id="navForm" enctype="" method="post">

<fieldset class="enterMenuNames" id="enterMenuNames" title="Enter Main Menu Names">
<div class="menuFieldGroup">
<!--<div class="newMenuField">-->
<label for='entMenuNamesF'>Menu Name</label>
<input type='text' class='entMenuNamesF'>

<div class="subContainer">

<label for='addMenu'>Add Menu Name</label>
<input type='image' class='addMenu' id='addMenu'  title="Add Menu Field" name='addMenu'src='_media/_backgrounds/greenPlus15x15.fw.png' onClick="" >

<label for='deleteMenu'>Delete Menu</label>
<input type='image' class='deleteMenu' id='deleteMenu'  title="Delete Menu Field" name='deleteMenu'  src="_media/_backgrounds/redMinus20x20.fw.png" onClick=''>

<label for='addMenuLink'>Add Menu Link</label>
<input type='image' class='addMenuLink' id='addMenuLink'  title="Add Menu Link Field" name='addMenuLink' src="_media/_backgrounds/Icons/linkIcon.fw.png" onClick=''>

<label for='addSubMenu'>Add Sub-Menu</label>
<input type='image' class='addSubMenu' id='addSubMenu' title="Add Sub-Menu Field" name='addSubMenu' src="_media/_backgrounds/Icons/menuIcon.fw.png" onClick=''>

<!--</div>-->
</div>
</div>

</fieldset>

<input type="submit" class="submit" id="submit" value="Submit">
</form>
<script type="text/javascript" src="_scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="_scripts/form.js"></script>
</body>
</html>


-------------------------------Java Script-----------------------------------------------------------------------------------------------

$(document).ready(function(){
 
    
 
    $(".addMenu").click(function () {
 
var counter = 1;
var newMenuFieldDiv = $(document.createElement('div')).attr("class", 'newMenuField' + counter);
   var content ="<label for='entMenuNamesF'+ counter >Menu Name</label>";
content +="<input type='text' class='entMenuNamesF'+ counter >";
content +="<article class='subContainer'+ counter >";
content +="<label for='addMenu'>Add Menu Name</label>"
content +="<input type='image' class='addMenu'+ counter +' id='addMenu'+ counter +' title='Add Menu Field' name='addMenu'+ counter +' src='_media/_backgrounds/greenPlus15x15.fw.png'>"
content +="<label for='deleteMenu'>Delete Menu</label>"
content +="<input type='image' class='deleteMenu' id='deleteMenu' title='Delete Menu Field' name='deleteMenu' src='_media/_backgrounds/redMinus20x20.fw.png'>"
content +="<label for='addMenuLink'>Add Menu Link</label>"
content +="<input type='image' class='addMenuLink' id='addMenuLink' title='Add Menu Link Field' name='addMenuLink' src='_media/_backgrounds/Icons/linkIcon.fw.png'>"
content +="<label for='addSubMenu'>Add Sub-Menu</label>"
content +="<input type='image' class='addSubMenu' id='addSubMenu' title='Add Sub-Menu Field' name='addSubMenu' src='_media/_backgrounds/Icons/menuIcon.fw.png'>"
content +="</article>";
 
newMenuFieldDiv.append(content);
 
/*newMenuFieldDiv.appendTo(".menuFieldGroup");*/
 
 
counter++;
});
});