Duplication of form ids

Im using the follwing code, in order to duplicate the inputs of the form and generate new id names, it works fine, but i need to add two divs with classes after the div with clonedSection1 ID, and then it doenst work anymore, do i need to change something in the script? or those divs just will block the normal functioning and i need to erase them?

Here is my code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</head>

<body>
<form id="myForm">
 <div id="clonedSection1" class="clonedSection">


   <!--    here goes   <div class="container contain2 marco">  
<div class="row row-centered ">-->

     <p>Name: <input type="text" name="name" id="name" /></p>
     <p>Product Description:</p>
     <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
     <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
     <p>Product Code Number: <input type="text" name="code" id="code" /></p>
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
     <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
     <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>



     <!--   
   </div>

   </div>  -->


 </div>
 <div>
     <input type="button" id="btnAdd" value="add another name" />
     <input type="button" id="btnDel" value="remove name" />
 </div>
</form>
<script type="text/javascript">
 $(document).ready(function() {
     $("#btnAdd").click(function() {
         var num     = $(".clonedSection").length;
         var newNum  = new Number(num + 1);

         var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

         newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
         newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
         newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
         newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
         newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
         newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
         newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
         newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

         $(".clonedSection").last().append(newSection)

         $("#btnDel").attr("disabled","");

         if (newNum == 5)
             $("#btnAdd").attr("disabled","disabled");
     });

     $("#btnDel").click(function() {
         var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
         $("#clonedSection" + num).remove();     // remove the last element

         // enable the "add" button
         $("#btnAdd").attr("disabled","");

         // if only one element remains, disable the "remove" button
         if (num-1 == 1)
             $("#btnDel").attr("disabled","disabled");
     });

     $("#btnDel").attr("disabled","disabled");
 });
</script>

</body>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</html>

I figured out that the script is creating the new ids in the second div that i need to generate

<div class="row row-centered " id="name2" name="name2">

So i think that I should definitely need to change something in the script, what should it be?

Answer

Only changes wrt to your code are :

var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
var newClonedSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
var newSection = newClonedSection.find('div').last();
...
...
...
$(".clonedSection").last().after(newClonedSection);

DOM Manipulation with jQuery’s .after()

$("#btnAdd").click(function() {
    var num     = $(".clonedSection").length;
    var newNum  = new Number(num + 1);

    var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

    var newClonedSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
    var newSection = newClonedSection.find('div').last();


    newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
    newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
    newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
    newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
    newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
    newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
    newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
    newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

    $(".clonedSection").last().after(newClonedSection);
    $("#btnDel").attr("disabled", "");
    if (newNum == 5)
        $("#btnAdd").attr("disabled", "disabled");
});

$("#btnDel").click(function() {
    var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
    $("#clonedSection" + num).remove();     // remove the last element

    // enable the "add" button
    $("#btnAdd").attr("disabled","");

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $("#btnDel").attr("disabled", "disabled");
});

$("#btnDel").attr("disabled", "disabled");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<html>
<body>
<form id="myForm">
 <div id="clonedSection1" class="clonedSection">
 <div class="container contain2 marco">  
 <div class="row row-centered ">

     <p>Name: <input type="text" name="name" id="name" /></p>
     <p>Product Description:</p>
     <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
     <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
     <p>Product Code Number: <input type="text" name="code" id="code" /></p>
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
     <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
     <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>
</div>
   </div>

 </div>
 <div>
     <input type="button" id="btnAdd" value="add another name" />
     <input type="button" id="btnDel" value="remove name" />
 </div>
</form>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *