title: jQuery AJAX each loop using append and html
body: <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>