Data manipulation with div classes and forms

How to take content from a div class one by one and then load it into array? Then I need to insert these one by one to some other div class. Basically, I have 2 forms, one of which is dummy and this dummy gets its content from CMS. The dummy form is hidden, while real form is shown, but empty at first. I need to use jquery to take dummy text from form and insert it to real form.

Something like this:

  <form name="real" me开发者_JS百科thod="post" action=""> 
  <input type="text" name="first" id="a"/> 
  <input type="text" name="second" id="b"/> 
  <input type="text" name="third" id="c"/> 
  <input type="text" name="fourth" id="d"/> 
  <input type="submit" value="submit"/> 
  </form> 

  <form name="extract" style="display:none;"> 
  <div class="generic">data_1</div> 
  <div class="generic">data_2</div> 
  <div class="generic">data_3</div> 
  <div class="generic">data_4</div> 
  </form> 

must become something like this:

  <form name="real" method="post" action=""> 
  data_1 <input type="text" name="first" id="a"/> 
  data_2 <input type="text" name="second" id="b"/> 
  data_3 <input type="text" name="third" id="c"/> 
  data_4 <input type="text" name="fourth" id="d"/> 
  <input type="submit" value="submit"/> 
  </form> 

Is there a way to do this? Thanks!

There are many ways to do this. For example:

$('[name=extract] div').each(function(index){
    $('[name=real] input:eq('+index+')').before($(this).text());
});

http://jsfiddle.net/seeSv/

edit: here are the api pages to the methods used:

http://api.jquery.com/attribute-equals-selector/
http://api.jquery.com/each/
http://api.jquery.com/eq-selector/
http://api.jquery.com/before/

You may want to check out the jQuery DataLink Plugin

I'll offer this version:

$('.generic').each(
    function(i){
        $('input:text').eq(i).val($(this).text());
    });

JS Fiddle demo.

Assumptions:

1. a 1:1 ratio between div.generic:input[type=text]

References:

1. each(),
2. :text pseudo-selector
3. eq().