****This is my html code This is only part of html code which I have button ****

div id="items">
    <div id="outer-wrapper-1" >
        <div id="inner-wrapper-1" >
            <img src="dryfruits images/badam large.jpg" id="first-img"></img>
            <span id="df-name-1" >BADAM</span><br>
            <span id="price-text-1" >&#8377; <span id="price-num-1" >700</span></span>
            <button id = "add-to-cart-1" ><span id="atc-span-1" >Add To Cart</span></button>
            <button id="remove-items-1" ><span id="remove-span-1" >Remove Items</span></button>
            <p id="1" >Product Added To Cart</p>
        </div>
    </div>
    <div id="outer-wrapper-2" >
        <div id="inner-wrapper-2" >
            <img src="dryfruits images/kaju.jpg" id="second-img"></img>
            <span id="df-name-2" >KAJU</span><br>
            <span id="price-text-2" >&#8377; <span id="price-num-2" >1200</span></span>
            <button id = "add-to-cart-2" ><span id="atc-span-2" >Add To Cart</span></button>
            <button id="remove-items-2" ><span id="remove-span-2" >Remove Items</span></button>
            <p id="2" >Product Added To Cart</p>

        </div>
    </div>
<div id="outer-wrapper-3" >
    <div id="inner-wrapper-3" >
        <img src="dryfruits images/pista.jpg" id="third-img"></img>
        <span id="df-name-3" >PISTA</span><br>
        <span id="price-text-3" >&#8377; <span id="price-num-3" >1300</span></span>
        <button id = "add-to-cart-3" ><span id="atc-span-3" >Add To Cart</span></button>
        <button id="remove-items-3" ><span id="remove-span-3" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-4" >
    <div id="inner-wrapper-4" >
        <img src="dryfruits images/green raisins.jpg" id="fourth-img"></img>
        <span id="df-name-4" >GREEN RAISINS</span><br>
        <span id="price-text-4" >&#8377; <span id="price-num-4" >550</span></span>
        <button id = "add-to-cart-4" ><span id="atc-span-4" >Add To Cart</span></button>
        <button id="remove-items-4" ><span id="remove-span-4"  >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-5" >
    <div id="inner-wrapper-5" >
        <img src="dryfruits images/black raisins.jpg" id="fifth-img"></img>
        <span id="df-name-5" >BLACK RAISINS</span><br>
        <span id="price-text-5" >&#8377; <span id="price-num-5" >420</span></span>
        <button id = "add-to-cart-5" ><span id="atc-span-5" >Add To Cart</span></button>
        <button id="remove-items-5" ><span id="remove-span-5" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-6" >
    <div id="inner-wrapper-6" >
        <img src="dryfruits images/walnuts.jpg" id="sixth-img"></img>
        <span id="df-name-6" >CHILE WALNUTS</span><br>
        <span id="price-text-6" >&#8377; <span id="price-num-6" >1400</span></span>
        <button id = "add-to-cart-6" ><span id="atc-span-6" >Add To Cart</span></button>
        <button id="remove-items-6" ><span id="remove-span-6" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-7" >
    <div id="inner-wrapper-7" >
        <img src="dryfruits images/anjeer.jpg" id="seventh-img"></img>
        <span id="df-name-7" >ANJEER</span><br>
        <span id="price-text-7" >&#8377; <span id="price-num-7" >1000</span></span>
        <button id = "add-to-cart-7" ><span id="atc-span-7" >Add To Cart</span></button>
        <button id="remove-items-7" ><span id="remove-span-7" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-8" >
    <div id="inner-wrapper-8" >
        <img src="dryfruits images/anjeer.jpg" id="eighth-img"></img>
        <span id="df-name-8" >ANJEER</span><br>
        <span id="price-text-8" >&#8377; <span id="price-num-8" >1000</span></span>
        <button id = "add-to-cart-8" ><span id="atc-span-8" >Add To Cart</span></button>
        <button id="remove-items-8" ><span id="remove-span-8" >Remove Items</span></button>
    </div>
</div>

I have 8 ADD TO CART button how know which add to cart button got clicked. What I have to is if 2nd add to cart button got clicked then have to show "product added to the cart "under that button if this possible then I can add more feature I have 8 ADD TO CART button how know which add to cart button got clicked. What I have to is if 2nd add to cart button got clicked then have to show "product added to the cart under that button if this possible then I can add more feature Please help if anybody can

CodePudding user response：

You can make use of event delegation by attaching the event listener to the parent div named "items" instead of attaching a click event on each button.

document.getElementById('items').addEventListener('click', event =>{
    console.log(event.target.id);
});

CodePudding user response：

button.addEventListener('click', event => {
 console.log(event.target.id)
});