Jquery moving elements from one div to another acting buggy
<p>I have 3 divs(#col1, #col2 and #col3) which contain keywords wrapped in span tags. When a user clicks on a keyword/span it moves out of #col1 or #col2 and into #col3.
Then when the user clicks on #col3 span item it moves out of #col3 and back into it's original div.</p>

<p><strong>PROBLEM</strong></p>

<p>I can get the keywords to move to #col3 but I can't move them back out.  #col3 keeps calling/using the #col1 or #col2 function.  I tried using remove() but that didn't help.</p>

<pre><code>$("#col1 span, #col2 span").click(function(){
    var tag = this.id;
    //$(this).remove();
    $(this).appendTo('#col3');
    $('#'+tag).wrap("&lt;p&gt;&lt;/p&gt;");
});
$('#col3 span').click(function(){
    //move back to original div (#col1 or #col2)
    //I can't figure this part out either
});

&lt;div id="col1"&gt;
    &lt;span id="tag1" class="marketingkey" &gt;Unilevel&lt;/span&gt;
    &lt;span id="tag2" class="marketingkey" &gt;Person-to-Person&lt;/span&gt;
    &lt;span id="tag3" class="marketingkey" &gt;Retail Bonuses&lt;/span&gt;
    &lt;span id="tag4" class="marketingkey" &gt;Multi-Level/Direct Sales&lt;/span&gt;
    &lt;span id="tag5" class="marketingkey" &gt;Binary&lt;/span&gt;
    &lt;span id="tag6" class="marketingkey" &gt;Matrix&lt;/span&gt;
    &lt;span id="tag7" class="marketingkey" &gt;Hybrid&lt;/span&gt;
&lt;/div&gt;
&lt;div id="col2"&gt;
    &lt;span id="tag8" class="typekey" &gt;Nutritional Supplements&lt;/span&gt;
    &lt;span id="tag9" class="typekey" &gt;Super Juices&lt;/span&gt;
    &lt;span id="tag10" class="typekey" &gt;Skin Care&lt;/span&gt;
    &lt;span id="tag11" class="typekey" &gt;Cosmetics&lt;/span&gt;
    &lt;span id="tag12" class="typekey" &gt;Fragrances&lt;/span&gt;
    &lt;span id="tag13" class="typekey" &gt;Hair Care&lt;/span&gt;
    &lt;span id="tag14" class="typekey" &gt;Jewelry&lt;/span&gt;
&lt;/div&gt;
&lt;div id="col3"&gt;
&lt;/div&gt;
</code></pre>
