Cambiar id de elemento clonado Jquery

[Gabriel92]

Buenas soy nuevo en este foro y tambien en Jquery. Tengo una duda que me esta volviendo loco. Tengo el siguiente elemento que clono.

Código HTML:

<section class="main">
<article class="buscador">
<form class="form-wrapper">
<input type="text" id="search" placeholder="Buscar  ..." required>
<input type="submit" value="Buscar" id="submit">
</form>
</article>
</section>
 

Lo clono con este código.

Código Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
function UpdateTableHeaders() {
   $(".main").each(function() {
   
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
       
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });
       };
   });
}
 
// DOM Ready      
$(function() {
 
   var clonedHeaderRow;
 
   $(".main").each(function() {
       clonedHeaderRow = $(".buscador", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");
   });
   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
   
});
  </script>
 

El codigo lo que hace es copiar el elemento cuando hago scroll de tal forma que se muestra arriba y se mueve en conjunto al scroll. Mi problema es que el value de este código no se copia.

Código HTML:

<input type="text" id="search" placeholder="Buscar  ..." required>
 

He pensado en cambiar el id del elemento para que tengan ids distintas y poder pasar el value del original al otro y viceversa, pero solo he fallado en el intento.

Alguna sugerencia? Saludos y gracias.