Struggling in accessing row id in JS LWC

Question

I have created a custom html table having one input "Quanity" field. Need to access each row with quantity data in JS. For that I am trying to access the rowId but getting undefined. Need help here to find out the missing thing.

Here is my JS code :
 

handleQuantityChange(event) {
        const rowId = event.target.dataset.id;
                 console.log('rowId=>'+JSON.stringify(rowId));
                 
        const value = parseInt(event.target.value, 10);
                  console.log('value=>'+value);`your text`
        this.addedProducts = this.addedProducts.map(product =>
            product.Id === rowId ? { ...product, Quantity: value } : product
        );
        console.log('sss qty  '+JSON.stringify( this.addedProducts));
    

`HTML:

<template for:each={addedProducts} for:item="product">
                                                        <tr key={product.Id} id={product.Id}>
                                                                <td data-label="Name" class="slds-size_1-of-4">
                                                                        <div class="slds-truncate">{product.Name}</div>
                                                                </td>
                                                                <td data-label="Product Code" class="slds-size_1-of-4">
                                                                        <div class="slds-truncate">{product.ProductCode}</div>
                                                                </td>
                                                                <td data-label="List Price" class="slds-size_1-of-4">
                                                                        <div class="slds-truncate" >{product.List_Price__c} &euro;</div>
                                                                </td>
                                                                <td data-label="Discount" class="slds-size_1-of-4"  data-id={product.id}>
                                                                        <div class="slds-truncate">                                                                              
                                                                                <input type="number" value={Quantity} data-id={product.id} onclick={handleQuantityChange} >
                                                                        </div>
                                                                </td>

                                                                <td data-label="DiscountType" class="slds-size_1-of-4">

                                                                        <!-- Use lightning-combobox for discount type -->
                                                                        <lightning-combobox name="DiscountType" value={product.DiscountType} options={discountTypeOptions}  data-product-id={product.Id}></lightning-combobox>
                                                                </td>
                                                                <td data-label="Discount" class="slds-size_1-of-4">
                                                                        <div class="slds-truncate">
                                                                                <input type="number" value={Discount} onchange={handleDiscountChange} data-product-id={product.Id}>
                                                                        </div>
                                                                </td>
                                                                <td data-label="Net Price" class="slds-size_1-of-4">
                                                                        <div class="slds-truncate" >{NetPrice} &euro;</div>
                                                                </td>
                                                        </tr>
                                                </template>