How to update id and html element name inside div element?

Question

I have the following html code. It is generated by the Razor engine. It is dynamic. I mean that none of the items in the drop-down list can change depending on the user. I need to replicate this snapshot exactly below the same dropdown with a new id and a new name. I looked here , here , here and here . Below is my html. I added comments to the code for further clarification.

<!-- the entire section with id and name template needs to be copied --> <div id="template" name="template" class="form-group unique"> <label class="control-label col-md-2" for="Course">Course</label> <!-- the drop down below has id and name as Course[0].Title I need to increment index inside [] --> <div class="col-md-10"> <select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title"> <option value="1">Statistics</option> <option value="2">Trigonometry</option> <option value="3">Biology</option> <option value="4">Neurology</option> <option value="5">Applied</option> <option value="6">Theoretical</option> </select> </div> </div> 

Now I have come up with the following jQuery code. It copies only once and then stops working. I checked in the console and there is no error. The javascript code with comments for explanation is as follows.

 < script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> <script type="text/javascript "> $(document).ready(function () { //copy the section with class name unique var clone = $('.unique').clone(); //Copy again as i am modifying the id,name of div with unique class var clone2 = $('.unique').clone(); //initialize the index with 1, the item with 0 index is already in webpage. var i = 1; //Change name of drop down who has class drop and assign new name $(".unique ").find(".drop ").attr(" name ", " Course[0].Title "); //Change id of drop down who has class drop and assign new id $(".unique ").find(".drop ").attr(" id ", " Course[0].Title "); //on click of plus button, i add clone of drop down with parent div section and with new id and name $("# plus ").click(function () { //Add after the element which has class unique $('.unique').after(clone2); //Find name inside unique and update $(".unique ").find(".drop ").attr(" name ", " Course[" + i + "].Title "); //Find id inside unique and update $(".unique ").find(".drop ").attr(" id ", " Course[" + i + "].Title "); //Increment the index i = i + 1; }); }); </script> 

What happened in the script?

Answer 1

That's what you need? When setting attr("name") and attr("id")

there was some typo

Also here my code to get the insert works as much as you want:

I am cloning an element in the click() event to make it work.

 $(document).ready(function () { //initialize the index with 1, the item with 0 index is already in webpage. var i = 1; $("#plus").on('click', function () { //Add after the element which has class unique var clone2 = $('#template').clone(); $("#template").after(clone2); $(clone2).attr('id',"template"+i); $(clone2).attr('name',"template"+i); //Find name inside unique and update $(clone2).find(".drop ").attr("name", "Course[" + i + "].Title "); //Find id inside unique and update $(clone2).find(".drop ").attr("id", "Course[" + i + "].Title "); //Increment the index i++; }); }); 

See this script

Answer 2

You can send data via js, but elements that were added dynamically by js will not be returned to mvc action!

Answer 3

try using for loop sir

First customize your selection inside the div, for example:

 <div class="select-inside"> <select> <option value="1">Statistics</option> <option value="2">Trigonometry</option> <option value="3">Biology</option> <option value="4">Neurology</option> <option value="5">Applied</option> <option value="6">Theoretical</option> </select> </div> 

In a script, save the select element to var using the jquery selector. Then use the for loop to clone the select element and add to the document.

 var select = $(".select-inside select"); for(var i = 0; i < numberOfYourChoice; i++) { var clone = select; clone.attr("id", "id[" + i + "]"); clone.attr("name", "name[" + i + "]"); document.append(clone); } 

Answer 4

 < script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> <script type="text/javascript "> $(document).ready(function () { //copy the section with class name unique var clone = $('.unique').clone(); //Copy again as i am modifying the id,name of div with unique class var clone2 = $('.unique').clone(); //initialize the index with 1, the item with 0 index is already in webpage. var i = 1; //Change name of drop down who has class drop and assign new name $(".unique ").find(".drop ").attr(" name ", " Course[0].Title "); //Change id of drop down who has class drop and assign new id $(".unique ").find(".drop ").attr(" id ", " Course[0].Title "); //on click of plus button, i add clone of drop down with parent div section and with new id and name $("# plus ").click(function () { //Add after the element which has class unique $('.unique').after(clone2); //Find name inside unique and update $(".unique ").find(".drop ").attr(" name ", " Course[" + i + "].Title "); //Find id inside unique and update $(".unique ").find(".drop ").attr(" id ", " Course[" + i + "].Title "); //Increment the index i = i + 1; }); }); </script>