replace a clone element with a new clone element

Question

With Jquery, I am trying to add a clone element and remove the previously added element. Adding a clone element is working but removing the previously added element is not working (it removes all the clone elements). I am using "not()" function but it is not filtering as I want it to.

I searched through the web but could not find a solution so your help will be greatly appreciated!

--HTML--

<div id="clone-container">
   <!--cloned element comes here-->
</div>

<div id="original-container">
    <ul>
        <li>
            <span>Value1</span>
        </li>
        <li>
            <span>Value2</span>
        </li>
        <li>
            <span>Value3</span>
        </li>
    </ul>   
</div>

--Jquery--

$(document).ready(function(){

    $('#original-container > ul > li').click(function(event){

       //for adding clone elements
       var $selected_clone = $(this).children("span").clone();

       $selected_clone.appendTo("#clone-container > ul > li");


       // for removing previously added elements
       $("#clone-container > ul > li > span").not($selected_clone).remove();

    });
});

Answer 1

Remove the appendTo code execution and replace below

$("#clone-container > ul > li > span").not($selected_clone).remove();

with

$("#clone-container > ul > li > span").html($selected_clone.html());

Hope this will help !!

Answer 2

Check this out.. http://jsbin.com/uZij/1/

HTML

  <div id="clone-container">
    <ul>
      </ul>
   <!--cloned element comes here-->
</div>

<div id="original-container">
    <ul>
        <li>
            <span>Value1</span>
        </li>
        <li>
            <span>Value2</span>
        </li>
        <li>
            <span>Value3</span>
        </li>
    </ul>   
</div>

jQuery

$(document).ready(function(){

    $('#original-container > ul > li').click(function(event){

       //for adding clone elements
       var $selected_clone = $(this).clone();
       $selected_clone.appendTo("#clone-container > ul");


       // for removing previously added elements
       $("#clone-container > ul > li").not($selected_clone).remove();

    });
});