Buenas, tengo un pequeño problema que me gustaria preguntaros. Soy relativamente nuevo en esto de Jquery ya que me he dedicado toda la vida a programación con vb6 y vb.net asi que esto me trae de cabeza. Abajo os muestro el codigo del <article class="buscador">, este al hacer scroll se clona y se muestra arriba estatico.

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

Codigo Jquery que clona.

  <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>

Aqui el css

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

Hasta aqui todo bien, el problema es que cuando me clona el input text no me clona el value, y al clonar ambos elementos con el mismo id no veo la forma de pasar el value de uno al otro(Lo que a escrito el usuario en la caja de texto), de tal forma que al hacer scroll aparece un input text en blanco.

Saludos y gracias.