title: jQuery: copy values of all inputs (selects, radiobuttons, checkboxes etc) from one part of the page to another one
body: <p>There are two divs with different ids but absolutely with the same structure.</p>
  
  <pre><code>&lt;div id="block1"&gt;
     &lt;input type="text" class="class1" value="a"&gt;
     &lt;input type="text" class="class2" value="b"&gt;
     &lt;input type="checkbox" class="class3"&gt; checkbox
     &lt;select class="class4"&gt;
         &lt;option value="0"&gt;White&lt;/option&gt;
         &lt;option value="1"&gt;Brown&lt;/option&gt;
         &lt;option value="2"&gt;Gray&lt;/option&gt;
     &lt;/select&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;div id="block2"&gt;
     &lt;input type="text" class="class1" value="a"&gt;
     &lt;input type="text" class="class2" value="b"&gt;
     &lt;input type="checkbox" class="class3"&gt; checkbox
     &lt;select class="class4"&gt;
         &lt;option value="0"&gt;White&lt;/option&gt;
         &lt;option value="1"&gt;Brown&lt;/option&gt;
         &lt;option value="2"&gt;Gray&lt;/option&gt;
     &lt;/select&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>on one page.</p>
  
  <p>I want both blocks to look absolutely the same way. So, if you change something in the block1, the same thing happened in the block2 and the same changes for block1, if block2 changed respectively.</p>
  
  <p>So, I want</p>
  
  <pre><code>$("#block1").change(function () {
      //apply ALL values from block1 to block2
  });
  $("#block2").change(function () {
      //apply ALL values from block2 to block1
  });
  </code></pre>
  
  <p>That includes the values from input texts, input checkboxes and even selected option chosen values. The classes and types of all inputs are the absolutely the same respectively, the number and the value of options in the select boxes are also the same respectively.</p>
  
  <p>What's the shortest way to do that using jQuery? Is it possible to "copy" the values with one jQuery string?</p>