How to make a slider for each different html element on the page?

I need to make cards with sliders on my page and I need to do it using pure JavaScript, can't use any frameworks. Every time user clicks on each card, on this specific card a sliding should occur. Problem is, I can't just get access to all the slider-control elements, I need to do this dynamically, with retrieving an ID of a card (that has been clicked) or something. How can I do that? One solution would be to follow an event element, using .parrentNode right up to the card's ID, but what if some clicked element on the card had the same indentation level as my slider-controls? That would lead to an unwanted behavior. What else can I do?

Here is the section with product cards:

<section class="products">
  <div class="products__card slided" id="0">
    <div class="products__card--product-area">
      <div class="galery">
          <img src="./img/converse-blue-front.jpg" alt="converse front" class="galery__image-1">
          <img src="./img/converse-blue-side.jpg" alt="converse side" class="galery__image-2">
          <img src="./img/converse-blue-back.jpg" alt="converse back" class="galery__image-3">
      </div>
      <div class="image-area">
            <div class="slider__arrows">
                <div class="slider__arrows--arrow right"></div>
                <div class="slider__arrows--arrow left"></div>
            </div>
            <img src="img/converse-blue-front.jpg" alt="Very cool men's converse">
            <div class="slider-dots">
                <div class="dot dot1"></div>
                <div class="dot dot2"></div>
                <div class="dot dot3"></div>
            </div>
      </div>
    </div>
    <div class="products__card--name-area">
      <div class="products__card--name-area--prodName" id="name"><p>Very cool men's converse</p></div>
        <div class="products__card--name-area--price">
            <span id="price">485</span>
            <p>p.</p>
    </div>
    </div>
    <div class="products__card--slided-button-area">
      <a
        type="button"
        class="buying__button"
        id="startAddingButton=1"
        href="#buyingSetup-1"><p>Начать оформление</p></a>
      <div class="buying__setup" id="buyingSetup-1">
        <div class="buying__setup--trash" id="deleteItem"><i class="fas fa-trash"></i></div>
        <div class="buying__setup--spinner" id="spin"><i class="fas fa-sync-alt"></i></div>
        <div class="buying__setup--quantity">
          <span id="quantityOfProduct">1</span>
          <p>шт.</p>
        </div>
        <div class="buying__setup--plus" id="addProduct"><i class="fas fa-plus"></i></div>
        <div class="buying__setup--complete-button"><p>Оформить</p></div>
      </div>
    </div>
  </div>
  <div class="products__card discounted">
    <div class="products__card--product-area">
        <div class="image">
            <div class="slider__arrows">
                <div class="slider__arrows--arrow right"></div>
                <div class="slider__arrows--arrow left"></div>
            </div>
            <img src="./img/vans-black-front.jpg" alt="Vans for women">
        </div>
        <div class="slider-dots">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
        </div>
      </div>
      <div class="products__card--name-area">
        <span class="name" id="name">Vans for women very comfy and beautiful</span>
        <div class="price">
            <p class="price__discounted">2150p.</p>
            <div class="price__undiscounted">
                <span id="price">485</span>
                <p>p.</p>
            </div>
        </div>
      </div>
      <div class="products__card--slided-button-area">
        <a
          type="button"
          class="buying__button"
          id="startAddingButton=2"
          href="#startAdding-2">
        <p>Начать оформление</p>
      </a>
        <div class="buying__setup" id="startAdding-2">
          <div class="buying__setup--trash" id="deleteItem"><i class="fas fa-trash"></i></div>
          <div class="buying__setup--spinner"><i class="fas fa-sync-alt"></i></div>
          <div class="buying__setup--quantity">
            <span id="quantityOfProduct">1</span>
            <p>шт.</p>
          </div>
          <div class="buying__setup--plus" id="addProduct"><i class="fas fa-plus"></i></div>
          <div class="buying__setup--complete-button"><p>Оформить</p></div>
        </div>
      </div>
  </div>
</section>

Here is my... something of a solution which is not ideal

const controller = (() => {
document.addEventListener('click', ctrlDeleteItem);

function ctrlDeleteItem(event) {
    console.log(event.target.parentNode.parentNode.parentNode.parentNode.id);
}

})();