jQuery duplicate item inside div

Question

I have the following HTML structure:

<div id="container">
     <div class='label-item-text drag' data-type='text'>
         <div>Right click on me and check the HTML of the duplicated</div>
     </div>
</div>

And I'm trying to duplicate the items inside #container. Unfortunately is not working as I expect.

A) My code duplicates all the items inside, when actually I have only selected one

B) I can't duplicate properly

The code that duplicates all items is the following.

$('#container').append($dragRightClick.parent().html());

Well, the parent() of $dragRightClick is the #container, so I understand the reason why it duplicate all the items...

What I want to duplicate is only the div inside the #container, that means:

<div class='label-item-text drag' data-type='text'>
    <div>Right click on me and check the HTML of the duplicated</div>
</div>

But what I've got so far is only:

<div>Right click on me and check the HTML of the duplicated</div>

The following code outputs the above code:

console.log("Clone: " + $dragRightClick.clone().html());
console.log("HTML: " + $dragRightClick.html()); 

You can check the full problem in JSFiddle.

Answer 1

You should use

$('#container').append($dragRightClick.clone());

instead of this :

$('#container').append($dragRightClick.parent().html());

See updated JSFiddle