Good afternoon,

I have a deconstructed object and I want to dinamically attribute the id of each object to a created element.

While using the e to listen for clicks, I am being unable to get the proper result because the e.target.dataset.id is returning as undefined.

This is the snippet of code

import { menuArr as menuOptions } from "/data.js"

// handle Clicks
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('plus-btn')) { 
        console.log(e.target.dataset.id);
    }
});

// renders the menu
function renderMenuOpts(options) {
    return options.map(option => {
        const {
            name,
            ingredients,
            id,
            price,
            emoji,
        } = option;
        const ingredientString = ingredients.join(', ');

        return `
        <div class="menu-option">
            <span class="emoji">${emoji}</span>
            <div class="option-details">
                <h3 class="option-name">${name}</h3>
                <p class="list-ingredients">${ingredientString}</p>
                <p class="price">${price}€</p>
            </div>
            <button class="plus-btn" data-id="${option.id}">
                <img src="/images/plus.png" class="plus-btn" alt="Plus icon">
            </button>
        </div>
        `;
    }).join(' ');
}

// render the total Menu 
function addToCashout(optionId) {
    document.getElementById('orderTotal').style.display = 'block';
    console.log(optionId);
}

function render() {
    document.getElementById('selectOptions').innerHTML = renderMenuOpts(menuOptions);
}

render();

Issues with using dataset