title: javascript .push() inserts the same object every time
body: <p>I dont know what I am doing wrong, but I cant push object to an existing object. I have boxes, and calculator, ... after click on box ".items"</p>
  
  <pre><code>...
  &lt;div data-itemid="2" data-itemprice="43.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"&gt;&lt;div&gt;&lt;p&gt;Upton&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div data-itemid="4" data-itemprice="44.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"&gt;&lt;div&gt;&lt;p&gt;Marvin&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>After define the amount</p>
  
  <pre><code> &lt;div&gt;
      &lt;div class="to_pay"&gt;&lt;/div&gt;
      &lt;hr&gt;
          &lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;0&lt;/div&gt;
  &lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;1&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;2&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;3&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;4&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;5&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;6&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;7&lt;/div&gt;&lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;8&lt;/div&gt;
  
      &lt;div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;"&gt;9&lt;/div&gt;&lt;div&gt;&lt;button id="ok-order"&gt;OK&lt;/button&gt;&lt;button id="cancel-order"&gt;Cancel&lt;/button&gt;&lt;/div&gt;&lt;input type="text" id="actual-amount" name="actual-amount" &lt;hr=""&gt;
  
          &lt;div&gt;
              &lt;ul class="ordered-items"&gt;&lt;li data-itemid="78"&gt;Fulton...8 x 48.00...384 &lt;span class="itemslist-clear"&gt;X&lt;/span&gt; &lt;/li&gt;&lt;li data-itemid="92"&gt;Kyle...9 x 58.00...522 &lt;span class="itemslist-clear"&gt;X&lt;/span&gt; &lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;button id="send-order"&gt;ORDER&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I create a list with the steps by clicking on the "ok" button ... the unoredered list works fine, ... but after clicking on the "order" button, the <code>currentOrder</code> object - <code>items</code> array have the same objects, I tried to use .length, then simple assign .. the same issue occurs.
  The steps are ... click on boxes = "items" class, click on number "calc-number" class, click on ok button "ok-order" id ... (do it random times), then click on order button "send-order" id.</p>
  
  <pre><code>$(document).ready(function() {
  
      var currentOrder = {
          orderid : 5,
          items: [],
          totalPrice : 0
      }
  
  var activeItem = {
      itemId : 0,
      itemName: '',
      itemAmount : 0,
      itemPrice : 0
  }
  
  var desk = $('#front-desktop');
  var item = desk.find('.items');
  var orderItemList = desk.find('ul.ordered-items');
  
  
  $(desk).on('click', '.items', function(){
      activeItem.itemId = 0;
      activeItem.itemAmount = 0;
      activeItem.itemPrice = 0;
      item.removeClass('selected-item');
      $(this).toggleClass('selected-item');
  
      activeItem.itemName = $(this).text();
      activeItem.itemId = $(this)[0].dataset.itemid;
      activeItem.itemPrice = $(this)[0].dataset.itemprice;
  
  });
  
  function addToOrderedItemsList(){
      var tmp_item = '&lt;li data-itemid="'+activeItem.itemId+'"&gt;';
      tmp_item += activeItem.itemName+'...'+activeItem.itemAmount+' x '+activeItem.itemPrice+'...'+activeItem.itemAmount*activeItem.itemPrice;
      tmp_item += ' &lt;span class="itemslist-clear"&gt;X&lt;/span&gt; &lt;/li&gt;';
      orderItemList.prepend(tmp_item);
  }
  
  
  $(desk).on('click','.calc-number',function(){
      activeItem.itemAmount = $(this).text();
  });
  
  $(desk).on('click','#ok-order',function(){
      currentOrder.items.push(activeItem);
      // currentOrder.items[currentOrder.items.length] = activeItem;
      addToOrderedItemsList();
  
  });
  
      $(desk).on('click','#send-order',function(){    
          console.log(currentOrder.items);
      });
  });
  </code></pre>
  
  <p>Does anybody have idea why does <code>.push()</code> doesnt inserts object each after, and why inserts the last object every time into every array position?</p>
  
  <p><strong>UPDATE:</strong>
  I update the function as mentioned @Pointy , I should create a copy of object.</p>
  
  <pre><code>$(desk).on('click','#ok-order',function(){
      var copiedObject = jQuery.extend({},activeItem);
      currentOrder.items.push(copiedObject);
      // currentOrder.items[currentOrder.items.length] = activeItem;
      addToOrderedItemsList();
  
  });
  </code></pre>