jquery clone only once

Question

I have a series of divs like this:

<div id="available-posts">
    <div class="post" id="unique_id">
      <a href="#" class="addme">Add</a> Some text
    </div>

    <div class="post" id="unique_id">
      <a href="#" class="addme">Add</a> Some text
    </div>
</div>

The unique_id is a different number for each of the divs.

Now i have a new empty div like this

<div class="related-posts"></div>

And i clone items in there.

The thing is that i want to check if an item is already cloned. If it is i want to stop it from being cloned again.

This is how i clone items:

    // clone it
$('.addme').live('click', function() {
        $(this).parents('div.thepost').clone().fadeIn('normal').appendTo('#related-posts').find('a.addme').html('Remove').removeClass('addme').addClass('removeme');
        return false;
}); 

// remove it
$('.removeme').live('click', function() {
        $(this).parents('div.thepost').fadeOut('normal', function() {$(this).remove(); });
        return false;
}); 

In other words i want the cloned list to contain only unique items. Not for example 2 clones of the same post.

*edit: i am using live coz the first list (available posts) is populated through an AJAX call.

Answer 1

Just go ahead and check if there is a div with such ID already:

$('.addme').live('click', function() {
        var post = $(this).parents('div.thepost');
        var postId = post.attr("id");
        if ( $("#related-posts").find( "#" + postId ).size() ) return;

        post.clone().fadeIn('normal').appendTo('#related-posts').find('a.addme').html('Remove').removeClass('addme').addClass('removeme');
        return false;
}); 

Answer 2

i was looking for this $("#").clone().AppendTo('body')

thanks