Hello I've been stuck on this for quite awhile so I thought I would ask here for a bit of help.

I am currently making a shopping cart where you can add items to a basket and when going to the basket page have all the items that you have chosen be displayed in a list, I've only limited myself to using HTML, CSS and JavaScript for this project, I am also using session storage to store the products that was selected so the products can be rendered in the basket page.

The problem is I added a delete button for each of the product on the basket page, however when I click on the delete button, it only deletes the first item in my array, how do I get the delete button to delete the product that it was next to?

Here is my code for when adding the products to the basket

let itemList;

if (sessionStorage.getItem("items")) {
    itemList = JSON.parse(sessionStorage.getItem("items"))
} else {
    itemList = []
    sessionStorage.setItem("items", JSON.stringify(itemList))
}

//cupcake item
let item1 = { id:1 ,name: "cupcake", image: "images/cupcake.jpeg", price: "5.99", quantity: 1 }

//dougnut
let item2 = {id:2,name:"doughnut",price:"3.99",quantity:1}

//add to cart cupcake
document.getElementById("btnsave").addEventListener("click", function () {
    let array = JSON.parse(sessionStorage.getItem("items"))
    if(array.find((e)=> e.name === "cupcake")){
    for(let item of array) {
        if(item.name === "cupcake"){
        item.quantity += 1 
        return sessionStorage.setItem("items",JSON.stringify(array))
        }
        }
    }
    array.push(item1)
    sessionStorage.setItem("items",JSON.stringify(array))
})

//add to cart doughnut
document.getElementById("btnsave2").addEventListener("click", function () {
    let array = JSON.parse(sessionStorage.getItem("items"))
    if(array.find((e)=> e.name === "doughnut")){
    for(let item of array) {
        if(item.name === "doughnut"){
        item.quantity += 1 
        return sessionStorage.setItem("items",JSON.stringify(array))
        }
        }
    }
    array.push(item2)
    sessionStorage.setItem("items",JSON.stringify(array))    
})  

Here is my code for the basket page

let cart = JSON.parse(sessionStorage.getItem("items"))


function generateBasket() {
for (let i = 0; i < cart.length; i++) {
    let listItem = document.createElement("li")
    let image = document.createElement("img")
    let container = document.createElement("span")
    let name = document.createElement("span")
    let price = document.createElement("span")
    let quantity = document.createElement("span")
    let deleteBtn = document.createElement("button")
    deleteBtn.innerHTML = "Delete item"
    deleteBtn.addEventListener("click", function () {
      listItem.remove()
      cart.splice(cart[i], 1)
      console.log(cart)
      generateTotal()       
    })
    quantity.innerHTML = cart[i].quantity
    name.innerHTML = cart[i].name
    price.innerHTML = cart[i].price
    image.src = cart[i].image
    container.appendChild(image)
    listItem.appendChild(container)
    listItem.appendChild(name)
    listItem.appendChild(price)
    listItem.appendChild(quantity)
    listItem.appendChild(deleteBtn)
    listItem.setAttribute("class","myStyle")
    image.setAttribute("class","cupcake")
    shoppingCart.appendChild(listItem)
  }
}


function generateTotal() {
let totalArr = []
for (let product of cart) {
    let priceQuantity = product.price * product.quantity
    let rounded = priceQuantity.toFixed(2)
    let total = parseFloat(rounded)
    totalArr.push(total)
}
let totalPrice = 0
for (let i = 0; i < totalArr.length; i++) {
 totalPrice += totalArr[i]
}
  document.getElementById("total-price").innerHTML = `Your total is £${totalPrice}`
}

generateTotal()
generateBasket()