Question

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.

PROBLEM

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.

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

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

Answer 1

Try using live events:

$("#col1 span, #col2 span").live('click', function(){
    var tag = this.id;
    //$(this).remove();
    $(this).appendTo('#col3');
    $('#'+tag).wrap("<p></p>");
});
$('#col3 span').live('click', function(){

});