使用js显示购物车中的商品

Question

我有三个不同的产品数组，这是一个：

let necklaces = [
  {
    id: "BlueHeartNecklace",
    cat: "necklaces",
    price: "$25",
    name: "Blue Heart Necklace",
    img: "images/custom_jewlery/necklaces/61-t5HCxAEL._AC_UL480_QL65_.jpg",
    orders: 0,
  },
  {
    id: "BlueTileNecklace",
    cat: "necklaces",
    price: "$14",
    name: "Blue Tile Necklace",
    img: "images/custom_jewlery/necklaces/71pYceJZEgL._AC_UL480_QL65_.jpg",
    orders: 0,
  },
  {
    id: "GreenPearNecklace",
    cat: "necklaces",
    price: "$32",
    name: "Green Pear Necklace",
    img: "images/custom_jewlery/necklaces/61BHPeEKb7L._AC_UL480_QL65_.jpg",
    orders: 0,
  },
];

每次我将其中一个产品添加到购物车时，它都会显示数组中的最后一个产品。这是显示数组的代码：

let necklace;
function showNecklaces() {
  display.innerHTML = "";
  for (let index = 0; index < necklaces.length; index++) {
    necklace = necklaces[index];
    display.innerHTML += `<div ${necklaces[index].name}>
            ${necklaces[index].name}  , ${necklaces[index].price} ,  
            <img src="${necklaces[index].img}"></div>
            <button class="btn btn-primary" onclick='add(necklace)'> Add to cart</button> 
            `;
  }
}

这是我将产品添加到购物车的功能：

let cart = [];
function add(product) {
  console.log(product);
  cart.push(product);
}

这是当我想要显示整个购物车时单击的功能：

function showCart() {
  display.innerHTML = "";
  for (let index = 0; index < cart.length; index++) {
    display.innerHTML += `<div ${cart[index].name}>
    <button class="btn btn-danger" onClick='remove(${index})'>Remove</button>;
        ${cart[index].name}  , ${cart[index].price} ,
        <img src="${cart[index].img}"></div>`;
  }
}