How to increase ID while copying a tag in javascript

Question

I have a form and in my form there is a plus button for adding a div and at last I will send a list of that div to my controller.

$(“#addDiv”).click(function() {
  $(“#myForm div# section_0).clone().appendTo(“#myForm”);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id=“myForm”>
  <div id=“section_0”>
    //some tags here
  </div>
  <button id=“addDiv” class=“btn btn-primary”>add</add>
    </form>

There is not any problem in copying that div but I need to append a new id for that div and be increased by one. If anyone can help I would appreciate

take a look at https://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id — MikNiller, May 08 '19 at 06:19
The code snippet doesn't run, it has syntax errors. Would you like help with correcting those? — ProgrammerPer, May 08 '19 at 06:29

Roy Bogado · Answer 1 · 2019-05-08T06:35:34.803

Set a global variable globalSectionId to increment at each click and replace the attribute id each time you clone()

globalSectionId = 0;
$("#addDiv").click(function (){
    $("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm"); 
    // clone(). and set the new id with the .attr() - Thx @Phil
 });

I made a JSFiddle working: https://jsfiddle.net/4efkhdba/

globalSectionId = 0;
$("#addDiv").click(function (){

     $("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm"); 
    // clone(). and set the new id with the .attr() - Thx @Phil
console.log('the new id:'+globalSectionId)
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myForm">
  <div id="section_0">
    CLONE DIV!
  </div>
  <button type="button" id="addDiv" class="btn btn-primary">add</add>
  </div>

score 1 · Accepted Answer · edited May 08 '19 at 06:44

1

You better create a div with id boilerplate and then use it for cloning. Once you append the clone then iterate through the whole div list and add the id's.

<div id="boilerplate" class="tag">
   // some tags here
<div>


    $("#addDiv").on("click", function() {
        $("div#boilerplate").clone().appendTo("#myForm");

        $("#myForm").find("div.tag").each(function(i) {
            $(this).attr("id", "section_" + i);
        });
    });

edited May 08 '19 at 06:44

Danish Ali

2,354
3
15
26

answered May 08 '19 at 06:22

Deepak Singh

610
1
7
23

There is no need for i++?? – farshid torkaman May 08 '19 at 06:50
No, since we are looping through the div's in `.each()` value of `i` will increment by itself. – Deepak Singh May 08 '19 at 06:52

score 0 · Answer 3 · answered May 08 '19 at 06:54

Try this.

Here I have declared one variable which helps us to update id dynamically.

   var id=1;
    $("#addDiv").click(function() {
       var $div=$("#myForm div:last")
       var klon=$div.clone().prop('id','section_'+id++);
       $div.after(klon);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
      <div id="section_0">
        //some tags here
      </div>
     
</form>

<button id="addDiv" class="btn btn-primary">add</button>

score 0 · Answer 4 · answered May 08 '19 at 07:42

You can try this code here:

Not needed any loop just use document find item length because item length is given integer number and our id start at 0. so when item one then it returns 1 and we create new item id with last change one (1).

$("#addDiv").on('click',function(e){
 e.preventDefault();
  $('#section_0').append('<div id="section_'+$(document).find('.item').length+'" class="item"> Section '+$(document).find('.item').length+'</div>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <div class="item" id="section_0">
    //some tags here
  </div>
  <button id="addDiv" class="btn btn-primary">add</div>
</form>

==== Thanks ====

How to increase ID while copying a tag in javascript

4 Answers4