I have a Foreach data connected to a button. I want to insert this foreach data into an array called myArray every time I click the button. When I do myArray.push() , the data is added on top of each other. 3 data on the first click, 6 data on the second, 9 data on the 3rd... However, I want that data to be updated, not pushed, so I want always 3 data, I just want their values to change, how can I do this? Thanks.

// Foreach data
{
  "_id": "b94a22f5-acea-c649-d203-bdaa533c35b8",
  "productName": "Cookies",
  "productImage": "image://v1/6318fc_4f5a4c323cf74b21aaa61ddba1e924fb~mv2.jpg/file.jpg#originWidth=1050&originHeight=1050",
  "quantity": 4
}
{
  "_id": "dd7247dc-4f5f-a7fe-57df-20dce972fdc6",
  "productName": "Cake",
  "productImage": "image://v1/6318fc_c9a8011220064ddcb0bed049d1f6883d~mv2.jpg/file.jpg#originWidth=1200&originHeight=1800",
  "quantity": 3
}
{
  "_id": "ce5cae3b-db5a-623e-8c93-fec1c40c295d",
  "productName": "Coffee",
  "productImage": "image://v1/6318fc_4d19f3b393d94aa1aac03ab99b3abd8d~mv2.png/file.png#originWidth=833&originHeight=942",
  "quantity": 1
}


// I want it to be like this
console.log(myArray)
// output
// [
//   {
//   "_id": "b94a22f5-acea-c649-d203-bdaa533c35b8",
//   "productName": "Cookies",
//   "productImage": "image://v1/6318fc_4f5a4c323cf74b21aaa61ddba1e924fb~mv2.jpg/file.jpg#originWidth=1050&originHeight=1050",
//   "quantity": 4
// },
// {
//   "_id": "dd7247dc-4f5f-a7fe-57df-20dce972fdc6",
//   "productName": "Cake",
//   "productImage": "image://v1/6318fc_c9a8011220064ddcb0bed049d1f6883d~mv2.jpg/file.jpg#originWidth=1200&originHeight=1800",
//   "quantity": 3
// },
// {
//   "_id": "ce5cae3b-db5a-623e-8c93-fec1c40c295d",
//   "productName": "Coffee",
//   "productImage": "image://v1/6318fc_4d19f3b393d94aa1aac03ab99b3abd8d~mv2.png/file.png#originWidth=833&originHeight=942",
//   "quantity": 1
// }
// ]