title: jQuery each array index append to div
body: <p>I'm trying to append the values of array I've made into another div but when I append the array value its appending all the values of the array not just the one I've added(by click), any suggestions would be great, thanks in advance!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="products"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;p&gt;Lorem 1&lt;/p&gt;&lt;button class="target"&gt;Add&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;Lorem 2&lt;/p&gt;&lt;button class="target"&gt;Add&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="cart"&gt;
      &lt;ul&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery </p>
  
  <pre><code>$(document).ready(function(){
  
      var array = Array();
  
      $(".target").click(function() {
  
          array.push($(this).siblings('p').text());
  
          $.each(array, function(index, value) {
  
              $("#cart ul").append("&lt;li&gt;"+value+"&lt;/li&gt;");
          });
  
  
      });
  });
  </code></pre>
  
  <p>When I click Add on say the first button its displays</p>
  
  <p>Lorem 1</p>
  
  <p>but when I then click the add on the second button it displays</p>
  
  <p>Lorem 1
  Lorem 1
  Lorem 2</p>