Why can i only remove the last item of my LOCAL STORAGE with .FILTER

Question

I don't understand why i only can remove the last ELEMENT of my list of camera

I can remove the last one and even if it's work i get an error :

Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null
    at panier.js:43
    at Array.forEach (<anonymous>)
    at displayBasket (panier.js:42)

so if remove the last one and i refresh i got my 2 cameras ( with error cannot read ) . If i remove the last one again and i refresh and got the last camera ( still with the error Cannot Read )

but if i click on SUPPRIMER ( delete in english ) with only 1 item in my table it's working with no error .

i tried to understand but i don't get it .

Help me please :p

async function displayBasket() {
    const cameraIds = getCameraIds();

    const basket = document.getElementById("panier");

    if (cameraIds.length === 0) {
        basket.innerHTML = `<p>Votre panier est vide</p>`
    } else {
        const promises = [];

        cameraIds.forEach(cameraId => {
            promises.push(getCameraDetails(cameraId))
        })

        const allCameraDetails = await Promise.all(promises);
        const basketTable = document.getElementById("basketTable");
        console.log('allCameraDetails', allCameraDetails)
        allCameraDetails.forEach((cameraDetails, index) => {
            basketTable.innerHTML += `
            <tr>
                <td><img id="imageProduct" src="${cameraDetails.imageUrl}"></td>
                <td id="descriptionProduct">${cameraDetails.name}</td>
                <td id="priceProduct">${(cameraDetails.price / 100).toFixed(2)}</td>
                <td><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })

        });
    }
}

( watch screenShot )

Answer 1

Try updating the eventlisteners after the html has been modified.

        allCameraDetails.forEach((cameraDetails, index) => {
            basketTable.innerHTML += `
            <tr>
                <td><img id="imageProduct" src="${cameraDetails.imageUrl}"></td>
                <td id="descriptionProduct">${cameraDetails.name}</td>
                <td id="priceProduct">${(cameraDetails.price / 100).toFixed(2)}</td>
                <td><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `})
            allCameraDetails.forEach((_, index) => {
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return                           currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })
            })