Why jQuery appendTo removes the existing list item?

Question

I am working on a project in which I need to add the list items from list1 to list2 on dblclick of it or either pressing Add button. So far I have accomplished this Working jsfiddle .

 $().ready(function() {  
var classHighlight = 'highlight';
var $thumbs = $('ul li').click(function(e) {
    e.preventDefault();
    $thumbs.removeClass(classHighlight);
    $(this).addClass(classHighlight);
});
$('#select1').on ("dblclick","li", function(){
return $(this).appendTo('#select2').removeClass('highlight'); 
});
$('#select2').on ("dblclick","li", function(){
return $(this).remove(); 
});
   $('#add').click(function() {  
   $('#select1 .highlight').appendTo('#select2').removeClass('highlight'); 
   });  
   $('#remove').click(function() {  
     $('#select2 .highlight').remove();
   });  
  });  

But if you see clicking on the list1 item also removes the clicked item from list1 which I dont want to. I only need to copy it from list1 to list2 Can anyone help me with this? Thank You

Answer 1

When you append an existing element to a new parent, you move it; it doesn't get copied. You should clone the element first and then append cloned element:

$('#select1').on ("dblclick","li", function(){
  return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

and

$('#add').click(function() {  
 $('#select1 .highlight').clone().appendTo('#select2').removeClass('highlight'); 
});   

Working Demo

Answer 2

you use clone() function to help in this code

$('#select1').on ("dblclick","li", function(){
   return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

whole code here http://jsfiddle.net/s41txkng/4/

https://api.jquery.com/clone/