Append content with similar rel values
<p>I think I am stuck with this. I want to append the content of source into its target container based on rel similarities. </p>

<pre><code>&lt;div class="targets"&gt;
&lt;div class="target target-1" rel="1"&gt;container 1&lt;/div&gt;
&lt;div class="target target-2" rel="2"&gt;container 2&lt;/div&gt;
&lt;div class="target target-3" rel="3"&gt;container 3&lt;/div&gt;
&lt;/div&gt;

&lt;div class="sources"&gt;
&lt;div class="source source-1" rel="1"&gt;source 1 content to append to container 1&lt;/div&gt;
&lt;div class="source source-2" rel="2"&gt;source 2 content to append to container 2&lt;/div&gt;
&lt;div class="source source-3" rel="3"&gt;source 3 content to append to container 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So <strong>source 1 content to append to container 1</strong> should be appended to <strong>container 1</strong></p>

<p>I tried:</p>

<pre><code>var rel_attr = $(this).attr('rel');
$('.source-' + rel_attr).appendTo('.target-' + rel_attr);
</code></pre>

<p>but to no avail. I must have missed something.</p>

<p>Thanks for any help.</p>
