title: Clicking multiple images javascript not working
body: <p>I'm trying to make multiple images clickable  using javascript, so I have one div which has a big image and another div has smaller multiple images, if I click one of the multiple images it should change to a big image(obvious all multiple images to be clickable and change to a big image when clicked) now the problem is the images are not clickable and in console there is no errors, how can I make them clickable?</p>
  
  <p>Here is code .</p>
  
  <p><strong>blade</strong></p>
  
  <pre><code>  &lt;div class="bigImage"&gt;
     @if(count($product-&gt;ProductsPhoto))
         &lt;img src="{{ Storage::url($product-&gt;ProductsPhoto[0]-&gt;filename) }}"  style="width:400px;" alt=""  class="active" id="currentImage"&gt;
         @else
         &lt;h1&gt;no picture&lt;/h1&gt;
         @endif
     &lt;/div&gt;
  
    &lt;div class="product-section-images"&gt;
        @foreach($product-&gt;ProductsPhoto as $product)
         &lt;img src="{{ Storage::url($product-&gt;filename) }}" style="width:200px;" class="card-img" alt=""&gt;
         @endforeach
       &lt;/div&gt;
     @endforeach
  </code></pre>
  
  <p></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>   &lt;script&gt;
      (function(){
          const currentImage = document.querySelector('#currentImage');
          const images = document.querySelectorAll('.product-section-images');
  
          images.forEach((element) =&gt; element.addEventListener('click', thumbnailClick));
  
          function thumbnailClick(e) {
            currentImage.src = this.querySelector('img').src;
              currentImage.classList.remove('active');
  
              currentImage.addEventListener('transitionend', () =&gt; {
                  currentImage.src = this.querySelector('img').src;
                  currentImage.classList.add('active');
              })
  
              images.forEach((element) =&gt; element.classList.remove('selected'));
              this.classList.add('selected');
          }
  
      })();
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help will be appreciated</p>