jQuery append перезаписывать последний элемент

Question

Я пытаюсь динамически создать список, где я добавляю клонированный div.

Во-первых, у меня есть DIV в HTML

<main> 
    <div class="clone_me"> 
     ... 
    </div> 
</main> 

в JQuery, я клонировать ДИВ затем удалить его со страницы. Затем, после нажатия клавиши, я делаю поиск с вызовом AJAX и возвращаю 20 результатов. Я вижу все 20 результатов.

$(function(){ 
    var clone = $('.clone_me').clone(); 
    $('.clone_me').remove; 

    $(document).on('keyup', 'input', function() { 
     var variable = $(this).val(); 
     $.ajax({ 
      url: "link/to/script.php", 
      type:"POST", 
      dataType: "json", 
      data {variable:variable}, 
      success: function(data){ 
       var json = JSON.parse(data); 
       $.each(json.arrayVal, function() { 
        var value = this.value; 
        clone.find('.details').text(value); 
        $('main').append(clone); 
       } 
      } 
     }); 
    }); 
}); 

Теперь, вызов Ajax возвращает 20 строк (я могу читать их в консоли, так что я знаю, что он работает [и да, конечно, это просто фиктивная информация, но я знаю, что это работает]).

Когда я добавляю клон, по какой-то причине он перезаписывает один перед ним, поэтому вместо того, чтобы заканчивать 20 клонов, я получаю один клон с последним значением из вызова AJAX.

Как я могу добавить все 20 клонов и показать их?

Answer 1

Лол вам нужно «Клон» клон вар, как это:

$(function(){ 
    var clone = $('.clone_me').clone(); 
    $('.clone_me').remove(); 

    $(document).on('keyup', 'input', function() { 
     var variable = $(this).val(); 
     $.ajax({ 
      url: "link/to/script.php", 
      type:"POST", 
      dataType: "json", 
      data {variable:variable}, 
      success: function(data){ 
       var json = JSON.parse(data); 
       $.each(json.arrayVal, function() { 
        var value = this.value; 
        var newclone = clone.clone().find('.details').text(value); 
        $('main').append(newclone); 
       } 
      } 
     }); 
    }); 
});