How to get the index value of the e.target click?

Question

I want to get the index value of the div which has been clicked. I have 6 divs. When I click on them using e.target from the whole document, I want to get the index position of the clicked one from the 6 divs

 const myall = Array.from(document.querySelectorAll('.same'));
 const thum_container = Array.from(document.querySelectorAll('.item-thumb'));

document.addEventListener('click', (e) => {
        if(e.target.classList.contains('item-thumb')){
            
            
            alert('lets see ' + thum_container.indexOf(e.target));     
         }
     }); 

<div id="modal-product-thumb-item" style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        one
                                                                        </h2>
                                                                    </a>
                                                                </div>
                                                                
<div  style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        two
                                                                        </h2>
                                                                    </a>
                                                                </div>
                                                                
<div  style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        three
                                                                        </h2>
                                                                    </a>
                                                                </div>   
                                                                
                                                                <div  style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        foure
                                                                        </h2>
                                                                    </a>
                                                                </div> 
                                                                
                                                                <div  style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        five
                                                                        </h2>
                                                                    </a>
                                                                </div> 
                                                                
                                                                <div  style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1;  overflow: hidden; background: #f1f1f1;">
                                                                    <a  class="item-thumb">
                                                                        <h2>
                                                                        six
                                                                        </h2>
                                                                    </a>
                                                                </div> 

I want to get the index value of the div which has been clicked. I have 6 divs, when I click on them using e.target from the whole document, I want to get the index position of the clicked one from the 6 divs

const myall = document.querySelectorAll('.container');

document.addEventListener('click', (e) => {
        if(e.target.classList.contains('same')){
             myall.forEach((eachitem, eachindex) => {
                eachitem.addEventListener('click', () => {
                    alert('lets see ' + eachindex);
                });
            });  
         }
     });

<div class="container">
<div class="same">1</div>
<div class="same">2</div>
<div class="same">3</div>
<div class="same">4</div>
<div class="same">5</div>
<div class="same">6</div>
</div>

Answer 1

Just get an Array of the desired div elements and then use indexOf to find the index of the clicked element.

const myall = Array.from(document.querySelectorAll('.container .same'));

document.addEventListener('click', (e) => {
   if(e.target.classList.contains('same')){
      console.log(myall.indexOf(e.target));  
    }
});

<div class="container">
  <div class="same">1</div>
  <div class="same">2</div>
  <div class="same">3</div>
  <div class="same">4</div>
  <div class="same">5</div>
  <div class="same">6</div>
</div>

Here is the same solution using the code from your Fiddle with additional elements so you can see that it works regardless of the number of elements:

document.addEventListener('click', (e) => {
  if(e.target.classList.contains('item-thumb')){
  
    // Get an array of just the elements in this container
    const items = Array.from(e.target.closest("div.modal-product-thumb-item").querySelectorAll(".item-thumb"));
    alert('lets see ' + items.indexOf(e.target));
  }
});

div.modal-product-thumb-item {
  border-radius: 12px; 
  border: 1px solid #e8e8e1;  
  overflow: hidden; 
  background: #f1f1f1;
  margin-bottom:3px;
}

<div class="modal-product-thumb-item">
  <h2 class="item-thumb">Item</h2>
</div>
<div class="modal-product-thumb-item">
  <h2 class="item-thumb">Item</h2>
  <h2 class="item-thumb">Item</h2>
</div>
<div class="modal-product-thumb-item">
  <h2 class="item-thumb">Item</h2>
  <h2 class="item-thumb">Item</h2>
  <h2 class="item-thumb">Item</h2>
</div>

Answer 2

The easiest way to do this is to target all elements first. Loop through them and add a listener.

const myall = document.querySelectorAll('.container .same');

myall.forEach((element, index) => {
    element.addEventListener('click', (e) => {
        console.log('div text',e.target.textContent);
        console.log('index of the div', index);
    });
});