How to get the last value of a specific id in an array using javascript?

I have a function that store the values of a row in an array onkeyup event. However, there are instances that it would store the same row values but differ on quantity and total but the same id. How would I store it in the array in a way that it would just save the most current set of values of an specific id? I know it's a bit confusing, but please take a look in the image below. Thank you for the help.

I would like to save the ff:

{id:"1", qty:"4", price:"45", total:"180"}
{id:"2", qty:"3", price:"10", total:"30"}
{id:"3", qty:"50", price:"12", total:"600"}
{id:"4", qty:"60", price:"12", total:"720"}

My Code:

var arrayVar = [];
var data;

$(function(){

  $('#tbl-po-list').on( 'keyup change' , 'input[type="number"]' ,function(){

    $(this).parents('.info').find('.total').val($(this).val() * $(this).parents('.info').find('.price').val());

      data = {
        id: $(this).parents('.info').find('.prod-id').val(),
        qty: $(this).val(),
        price: $(this).parents('.info').find('.price').val(),
        total: $(this).parents('.info').find('.total').val()
      }

      arrayVar.push(data); 

      for(var i = 0; i < arrayVar.length; i++){
        console.log(arrayVar[i]);
      }

    });   

  });