How to jQuery clone and change id

Question

I need to clone the id and then add a number after it like so id1  id2  etc  Everytime you hit clone you put the clone after the latest number of the id      button   click function             id   clone   after   id

User · Answer

cloneDiv   click function           get the last DIV which ID starts with     klon    var  div      div id   klon   last          Read the Number from that DIV s ID  i e  3 from  klon3        And increment that number by 1   var num   parseInt   div prop  id   match   d  g   10    1        Clone it and assign the new ID  i e  from num 4 to ID  klon4     var  klon    div clone   prop  id    klon  num          Finally insert  klon wherever you want    div after   klon text  klon  num             lt script src  https   code jquery com jquery-3 1 0 js  gt  lt  script gt

User · Answer

Update  As Roko C Bulijan pointed out   you need to use  insertAfter to insert it after the selected div  Also see updated  code if you want it appended to the end instead of beginning when cloned multiple times  DEMO  Code      var cloneCount   1         button   click function              id              clone              attr  id    id   cloneCount               insertAfter   id  id  last                              -- Use   id  if you want to insert the cloned                               element in the beginning            text  Cloned      cloneCount-1       lt --For DEMO             Try       id   clone   attr  id    id1   after   id      If you want a automatic counter  then see below      var cloneCount   1        button   click function              id   clone   attr  id    id   cloneCount    insertAfter   id

User · Answer

This is the simplest solution working for me       your modal id   clone   prop  id    new modal id   appendTo  target container

User · Answer

x000D   x000D      cloneDiv   click function    x000D   x000D   x000D       get the last DIV which ID starts with     klon  x000D    var  div      div id   klon   last    x000D   x000D       Read the Number from that DIV s ID  i e  3 from  klon3   x000D       And increment that number by 1 x000D    var num   parseInt   div prop  id   match   d  g   10    1  x000D   x000D       Clone it and assign the new ID  i e  from num 4 to ID  klon4   x000D    var  klon    div clone   prop  id    klon  num    x000D   x000D       Finally insert  klon wherever you want x000D     div after   klon text  klon  num     x000D   x000D      x000D   lt script src  https   code jquery com jquery-3 1 0 js  gt  lt  script gt  x000D   x000D   lt button id  cloneDiv  gt CLICK TO CLONE lt  button gt   x000D   x000D   lt div id  klon1  gt klon1 lt  div gt  x000D   lt div id  klon2  gt klon2 lt  div gt  x000D   x000D   x000D      Scrambled elements  retrieve highest ID  Say you have many elements with IDs like klon--5 but scrambled  not in order   Here we cannot go for  last or  first  therefore we need a mechanism to retrieve the highest ID    x000D   x000D  const  all       id   klon--      x000D  const maxID   Math max apply Math   all map  i  el    gt   el id match   d   g  0   get     x000D  const nextId   maxID   1  x000D   x000D  console log  New ID is    nextId     x000D   lt div id  klon--12  gt 12 lt  div gt  x000D   lt div id  klon--34  gt 34 lt  div gt  x000D   lt div id  klon--8  gt 8 lt  div gt  x000D   x000D   lt script src  https   code jquery com jquery-3 1 0 js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This works too   x000D   x000D   var i   1  x000D      button   click function     x000D           red   clone   appendTo   test   prop  id    red    i   x000D       i     x000D       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 2 4 jquery min js  gt  lt  script gt  x000D   lt div id  test  gt  x000D     lt button gt Clone lt  button gt  x000D     lt div class  red  id  red  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt style gt  x000D     red   x000D      width 20px  x000D      height 20px  x000D      background-color  red  x000D      margin  10px  x000D      x000D   lt  style gt  x000D   x000D   x000D

User · Answer

I have created a generalised solution  The function below will change ids and names of cloned object  In most cases  you will need the row number so Just add  data-row-id  attribute to the object    function renameCloneIdsAndNames  objClone          if   objClone attr   data-row-id                console error   Cloned object must have   data-row-id   attribute                 if  objClone attr   id                objClone attr   id   objClone attr   id    replace    d     function  strId     return parseInt  strId     1                    objClone attr   data-row-id   objClone attr   data-row-id    replace    d     function  strId     return parseInt  strId     1              objClone find    id     each  function              var strNewId      this   attr   id    replace    d     function  strId     return parseInt  strId     1                   this   attr   id   strNewId             if     this   attr   name                    var strNewName       this   attr   name    replace      d    g  function  strName                     strName   strName replace            g                        var intNumber   parseInt  strName     1                  return       intNumber                                       this   attr   name   strNewName                           return objClone

[javascript] How to jQuery clone() and change id?

Examples related to javascript

Examples related to jquery

Examples related to clone