jQuery append overwriting last element
<p>I am trying to dynamically create a list where I append a cloned div.</p>

<p>First, I have the div in html</p>

<pre><code>&lt;main&gt;
    &lt;div class="clone_me"&gt;
        ...
    &lt;/div&gt;
&lt;/main&gt;
</code></pre>

<p>in the jquery, I clone the div then remove it from the page.  Then later, on keyup, I do some searching with an AJAX call and return 20 results.  I can see all 20 results.</p>

<pre><code>$(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);
                }
            }
        });
    });
});
</code></pre>

<p>Now, the ajax call returns 20 rows (I can read them all in console, so I know it's working [and yes, of course it's just dummy information, but I know it works]). </p>

<p>When I append the clone, for some reason it's overwriting the one before it, so Instead of ending up with 20 clones, I end up with a single clone with the last value from the AJAX call.</p>

<p>How do I get all 20 clones to be appended and show up?</p>