Question

You can clone an element with it’s events and data, but then the events still apply to the original object instead of the new object.

I have used jsfiddle to demonstrate the issue: http://jsfiddle.net/VZZG4/

To reproduce:
1. Hit the clone button
2. In the new text input, type “New”
3. Hit the new clone button
Actual result: The newest clone says “Test”
Expected result: The newest clone says “New”

Question: How do you clone events and data to clone but apply to the newest clone?

Answer 1

use closest() to clone the expected element…

$(document).ready(function() {
    $('#clone').click(function() {
        $(this).closest('#container').clone(true).appendTo('#wrap');
    });
});

updated fiddle

and I suggest for you to use class instead of an id. Duplicate id is not valid html.