Usando JQuery: --- var clone = $('.form-modelo').children().clone(); var num = 1; $('.form-real').append(clone); $('.form-real').children().each( function() { $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) ); }); Notar que usei `.children()` ao clonar. Da forma como estava, você estava gerando um `.form-real` dentro de uma cópia da div `.form-modelo`, acredito que não seja o resultado desejado: Sem `.children()`: <div class='form-modelo'> <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text"> <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text"> </div> <div class='form-real'> <div class='form-modelo'> <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text"> <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text"> </div> </div> Deixei assim: <div class='form-modelo'> <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text"> <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text"> </div> <div class='form-real'> <input id="id_form-1-nome" name="form-1-nome" type="text"> <input id="id_form-1-texto" name="form-1-texto" type="text"> </div> <br>Demo: --- <!-- begin snippet: js hide: false --> <!-- language: lang-js --> var clone = $('.form-modelo').children().clone(); var num = 1; $('.form-real').append(clone); $('.form-real').children().each( function() { $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) ); }); <!-- language: lang-css --> #id_form-__prefix__-nome {border:2px solid blue;} #id_form-1-nome {border:2px solid red;} <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='form-modelo'> <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text"> <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text"> </div> <div class='form-real'></div> <!-- end snippet -->