Jquery che aggiunge senza rimuovere

Question

Quindi ho bisogno di prendere il contenuto da una classe specifica e metterlo in un div, che uso append per ... il mio problema è che append rimuove l'elemento che appendo, e ho bisogno di rimanere lì , Qui è il mio codice:

$(document).ready(function(){ 
    var $content = $('#popupcontent'); 
    var $window = $('#popupwindow'); 
    $('.open').click(function(){ 
     //alert('runnning'); 
     var a = $(this).contents('span'); 
     $content.append(a); 
     $window.fadeIn(300); 
    }); 
    $('.close').click(function(){ 
     //alert('running'); 
      var a = $content.contents('span'); 
     $window.fadeOut(300); 
     $('#popupcontent span').remove(); 
    }); 
}); 

Così come posso ottenere il contenuto, se cliccato, da ogni .open span alla #popupcontents id senza rimuoverlo dalla classe .open?

di mostrare ciò che voglio dire: JSFIDDLE

NOTA: la seconda volta che si clicca un link, non ci vorrà accodare qualsiasi contenuto perché questo contenuto è stato rimosso da quella classe, che non è quello che voglio

NOTA2: Non posso semplicemente solo append anziché remove nella funzione $('.close').click perché non riesco a rilevare quale istanza della classe .open proviene dal contenuto.

Answer 1

È necessario clonare l'elemento e aggiungere il clone: ​​

$('.open').click(function(){ 
    //alert('runnning'); 
    var a = $(this).contents('span'); 
    $content.append(a.clone()); 
    $window.fadeIn(300); 
}); 

Demo