jquery - javascript .push() inserts the same object every time

Question

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"

...
<div data-itemid="2" data-itemprice="43.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Upton</p></div></div>
<div data-itemid="4" data-itemprice="44.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Marvin</p></div></div>
...

After define the amount

 <div>
    <div class="to_pay"></div>
    <hr>
        <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">0</div>
<div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">1</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">2</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">3</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">4</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">5</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">6</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">7</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">8</div>

    <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">9</div><div><button id="ok-order">OK</button><button id="cancel-order">Cancel</button></div><input type="text" id="actual-amount" name="actual-amount" <hr="">

        <div>
            <ul class="ordered-items"><li data-itemid="78">Fulton...8 x 48.00...384 <span class="itemslist-clear">X</span> </li><li data-itemid="92">Kyle...9 x 58.00...522 <span class="itemslist-clear">X</span> </li></ul>
        </div>
        <button id="send-order">ORDER</button>
    </div>

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 currentOrder object - items 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.

$(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 = '<li data-itemid="'+activeItem.itemId+'">';
    tmp_item += activeItem.itemName+'...'+activeItem.itemAmount+' x '+activeItem.itemPrice+'...'+activeItem.itemAmount*activeItem.itemPrice;
    tmp_item += ' <span class="itemslist-clear">X</span> </li>';
    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);
    });
});

Does anybody have idea why does .push() doesnt inserts object each after, and why inserts the last object every time into every array position?

UPDATE: I update the function as mentioned @Pointy , I should create a copy of object.

$(desk).on('click','#ok-order',function(){
    var copiedObject = jQuery.extend({},activeItem);
    currentOrder.items.push(copiedObject);
    // currentOrder.items[currentOrder.items.length] = activeItem;
    addToOrderedItemsList();

});

Answer 1

It's because there is only one object. You never update "activeItem" to reference a new object. Whenever you want to start on a new item, you need to start with a new object:

activeItem = {};