jQuery appendTo работает только первый раз, затем заменяет

Question

Я пытаюсь использовать jQuery, чтобы добавить клонированный div в конце формы. Вот как это работает:

 var student_number = 1;
    var orig_student = $("#student-1").clone();

    $("#add-student-link").click(function() {
         ++student_number;
         orig_student.appendTo('form.reg').attr('id', 'student-' + (student_number)).addClass("additional-student");
    });

И это прекрасно работает в первый раз, я получаю div, который выглядит так:

<div id="student-2" class="additional-student"></div>

Но после этого div заменяется другим div с идентификатором "student-3". студент-3 должен был быть новым дивом, а не заменен студентом-2. Есть идеи?

Answer 1

Вы просто перемещаете клон, а не дублируете (см. Комментарии, оставленные ниже вашего вопроса).

$("#add-student-link").click(function() {
     ++student_number;
     $("#student-1").clone().attr('id', 'student-' + (student_number)).addClass("additional-student").appendTo('form.reg');
});

Если вы клонируете, чтобы сохранить копию в чистоте (это могут быть поля ввода в элементе, насколько мне известно), то клонируйте клон.

var orig_student = $("#student-1").clone().attr('id','');
$("#add-student-link").click(function() {
     ++student_number;
     orig_student.clone().attr('id', 'student-' + (student_number)).addClass("additional-student").appendTo('form.reg');
});

Answer 2

Когда вы нажимаете в первый раз, это работает, потому что он использует клонированный div.

Нажав второй раз, затем переменная orig_student все еще ссылается на тот же div, и вы добавляете его снова и меняете класс.

Чтобы это работало, вам нужно создать еще один клон для добавления в функцию. Потому что это то, что будет выполнено по клику.

var student_number = 1;
var orig_student = $("#student-1"); // No need to clone it here

$("#add-student-link").click(function() {
     ++student_number;
     // Create a new clone of your original div and append it
     // Like this we clone it only when really needed
     orig_student.clone().appendTo('form.reg').attr('id', 'student-' + (student_number)).addClass("additional-student");
});