Clone div and change id of selects inside

Question

I use this code to clone the .minor div inside the .major div :

 $(document).on("click", ".clone", clone); cloneIndex = 1; function clone() { cloneIndex++; $(this).parents(".minor").clone() .appendTo(".major") .attr("id", "form" + cloneIndex); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="major"> <p> <select id="major_sel_id"> <option value="na">N/a</option> <option value="test1">Test 1</option> <option value="test2">Test 2</option> </select> Major Select id </p> <div class="minor" id="form1"> <p> <select id="form1_q1"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 1 </p> <p> <select id="form1_q2"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 2 </p> <p> <button id="add" type="button" class="clone">+</button> </p> </div> </div> 

However this keeps the same IDs in each select. How can I change the IDs of the selects to form2_q1 , form2_q2 , etc...?

Here is a fiddle

Answer 1

You succeeded in replacing the ID of the parent, you need to get the children and replace their IDs. To get the children, you can use find("select") , and to replace their IDs, you can use a function inside attr() which will add the current suffix to the string "form" + cloneIndex . To get the current suffix, you can use this.id.substring(5) .

Try this (I added console.log line for demo, you don't need it):

 cloneIndex = 1; function clone() { cloneIndex++; $(this).parents(".minor") .clone() .attr("id", "form" + cloneIndex) .appendTo(".major") .find("select") .attr("id", function() { return "form" + cloneIndex + this.id.substring(5); }); console.log($(".major").html()); } $("#add").click(clone); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="major"> <p> <select id="major_sel_id"> <option value="na">N/a</option> <option value="test1">Test 1</option> <option value="test2">Test 2</option> </select> Major Select id </p> <div class="minor" id="form1"> <p> <select id="form1_q1"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 1 </p> <p> <select id="form1_q2"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 2 </p> <p> <button id="add" type="button" class="clone">+</button> </p> </div> </div> 

Answer 2

You need to replace all the selects ids too:

 $(document).on("click", ".clone", clone); let cloneIndex = 1; function clone() { cloneIndex++; $(this).parents(".minor").clone() .appendTo(".major") .attr("id", "form" + cloneIndex) .find("select").each(function(i, s) { $(s).attr("id", $(s).attr("id").replace(/form\\d+/, "form" + cloneIndex)); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="major"> <p> <select id="major_sel_id"> <option value="na">N/a</option> <option value="test1">Test 1</option> <option value="test2">Test 2</option> </select> Major Select id </p> <div class="minor" id="form1"> <p> <select id="form1_q1"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 1 </p> <p> <select id="form1_q2"> <option value="y">Yes</option> <option value="n">No</option> <option value="na" selected>N/a</option> </select> Question 2 </p> <p> <button id="add" type="button" class="clone">+</button> </p> </div> </div>