jQuery AJAX each loop using append and html
<p>I want from the following code to retrieve the data of the json file but the problem is that if I press again the button I see twice the results. I changed the first append of my each loop to html but then only the last object of my json is loaded.</p>

<p><strong>HTML :</strong></p>

<pre><code>&lt;ul id="myorders"&gt;&lt;/ul&gt;
&lt;button type="button" id="add-order"&gt;Load the orders&lt;/button&gt;
</code></pre>

<p><strong>JS :</strong></p>

<pre><code>$("#add-order").click(function(){ 

    $.getJSON('API/orders.json', function(data){

        $.each(data, function(i, order){
            $("#myorders").append("&lt;p&gt;&lt;li&gt; id: " + data[i].order.id + "&lt;/li&gt;");
            $("#myorders").append("&lt;li&gt; Name: " + data[i].order.name + "&lt;/li&gt;");
            $("#myorders").append("&lt;li&gt; Drink: " + data[i].order.drink + "&lt;/li&gt;&lt;/p&gt;")
        });         
    });
});
</code></pre>

<p><strong>Data example :</strong></p>

<pre><code>[{ "order":{"id": "1",
    "name": "Bill",
    "drink": "Capuccino"}},


  { "order":{"id": "2",
    "name": "Sofia",
    "drink": "Late"
}}]
</code></pre>