Пишу html/css/js песочницу для будущих курсов по веб- разработки. Как с помощью JQuery связать div и iframe?
Если вы собираетесь учить людей веб-разработке, то такие простейшие вещи должны знать. Хотя бы разобраться, как это сделано в десятках работающих сайтов типа codepen или jsfiddle.
Содержимое не испаряется, а переносится. DOM-элемент не может быть одновременно в нескольких местах. Потому, когда ты делаешь append, происходит перемещение  элемента из старого места в новое. Это не имеет никакого отношения к событию click.
Сначала элемент необходимо клонировать (для чего в jQuery есть метод clone), а уже созданный клонированием новый элемент вставлять.
И возьми за правило явно объявлять все локальные переменные посредством слова var - чтобы не выискивать потом по несколько часов причины непонятных глюков.