jQuery - move correlated elements
<p>On page load, I want to wrap the header span with <code>div</code> and move it into the front of related body div.
ie, move <code>hApplicant1 span</code> into the front of <code>tabApplicant1 div</code>, etc.</p>

<p>How do I write jQuery to accomplish this? thanks !</p>

<p>Given:</p>

<pre><code>&lt;div&gt;
            &lt;div id="header"&gt;
                &lt;span id="hDummy"&gt;&lt;/span&gt;
                &lt;span id="hApplicant1"&gt;James Smith&lt;/span&gt;
                &lt;span id="hApplicant2"&gt;John Doe&lt;/span&gt;
                &lt;span id="hApplicant3"&gt;&lt;/span&gt;
                &lt;span id="hApplicant4"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div id="body"&gt;
                &lt;div id="tabApplicant1"&gt;...&lt;/div&gt;
                &lt;div id="tabApplicant2"&gt;...&lt;/div&gt;
            &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
            &lt;div id="header2"&gt;
                &lt;span id="h2Dummy"&gt;&lt;/span&gt;
                &lt;span id="h2Applicant1"&gt;Black Smith&lt;/span&gt;
                &lt;span id="h2Applicant2"&gt;Shoe Maker&lt;/span&gt;
                &lt;span id="h2Applicant3"&gt;&lt;/span&gt;
                &lt;span id="h2Applicant4"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div id="body2"&gt;
                &lt;div id="tab2Applicant1"&gt;...&lt;/div&gt;
                &lt;div id="tab2Applicant2"&gt;...&lt;/div&gt;
            &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>the result should be like this:</p>

<pre><code>&lt;div&gt;
            &lt;div id="header"&gt;
                &lt;span id="hDummy"&gt;&lt;/span&gt;
                &lt;span id="hApplicant3"&gt;&lt;/span&gt;
                &lt;span id="hApplicant4"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div id="body"&gt;
                &lt;div&gt;&lt;span id="hApplicant1"&gt;James Smith&lt;/span&gt;&lt;/div&gt;
                &lt;div id="tabApplicant1"&gt;...&lt;/div&gt;
                &lt;div&gt;&lt;span id="hApplicant2"&gt;John Doe&lt;/span&gt;&lt;div&gt;
                &lt;div id="tabApplicant2"&gt;...&lt;/div&gt;
            &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
            &lt;div id="header2"&gt;
                &lt;span id="h2Dummy"&gt;&lt;/span&gt;
                &lt;span id="h2Applicant3"&gt;&lt;/span&gt;
                &lt;span id="h2Applicant4"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div id="body2"&gt;
                &lt;div&gt;&lt;span id="h2Applicant1"&gt;Black Smith&lt;/span&gt;&lt;/div&gt;
                &lt;div id="tab2Applicant1"&gt;...&lt;/div&gt;
                &lt;div&gt;&lt;span id="h2Applicant2"&gt;Shoe Maker&lt;/span&gt;&lt;div&gt;
                &lt;div id="tab2Applicant2"&gt;...&lt;/div&gt;
            &lt;/div&gt;
&lt;/div&gt;
</code></pre>
