Como JQuery clone () e alterar id

Eu preciso clonar o id e, em seguida, adicionar um número depois, assim id1, id2, etc Toda vez que você clone clone você colocar o clone após o número mais recente do id.

$("button").click(function(){ $("#id").clone().after("#id"); }); 

 $('#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 (ie: 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 (ie: 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) ); }); 
   
klon1
klon2

Update: Como Roko C.Bulijan apontou .. você precisa usar .insertAfter para inseri-lo após o div selecionado. Além disso, consulte o código atualizado, se desejar anexá-lo ao final, em vez de começar quando clonado várias vezes. DEMO

Código:

  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)); //< --For DEMO }); 

Experimentar,

 $("#id").clone().attr('id', 'id1').after("#id"); 

Se você quiser um contador automático, veja abaixo,

  var cloneCount = 1; $("button").click(function(){ $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id"); }); 

Eu criei uma solução generalizada. A function abaixo mudará os ids e os nomes do object clonado. Na maioria dos casos, você precisará do número da linha, para adicionar o atributo “data-row-id” ao 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; }