iterate multiple elements over multiple classes in jQuery

Question

I'm trying to iterate over 3 forms, which contain a varying number of input boxes. Within each form, the input fields have the same class. What I need to do, is have a "replicate" button so that when this is pressed, it will copy the input from one field and copy it over to each one. Here is how things are currently setup:

<input type="button" class="replicate" />

<form class="1">
  <input class="1_size" /> <!--this is the one I want to copy to all other fields -->
</form>
<form class="1">
  <input class="1_size" />
</form>

<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>

<form class="3">
 <input class="3_size" />
</form>
<form class="3">
  <input class="3_size" />
</form>

So what I need to do [when the replicate button is pressed] is to iterate over each form and use the input from the first one (see the comment) and copy it to all the other inputs in all the other forms. Is this even possible? The reason that there are forms with same classes and inputs is because they have a "+" and "-" button

I'm using the jQuery library and I'm thinking I can do something like:

$(document).ready(function() {
    $('.1, .2, .3').each(function() {

    });
});

Could I then use something like .parents() or parent()? I'm a little stuck and not even sure if you can use an each() like this...hope I've explained this well!

Answer 1

try something like below, i consider that input type is text

$(document).ready(function() {
    $('input.replicate').click(function(){    
        var first_form = $('form:first');        
        $('form').not(first_form).each(function(){
          $(this).children('input:text').val(first_form.children('input:text').val());
        });
    });
});

Fiddle EXAMPLE : http://jsfiddle.net/raj_er04/DSzjX/