how to get id of clicked add to cart button from eight button

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

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

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

>Solution :

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);
});