Clicking multiple images javascript not working

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?

Here is code .

blade

  <div class="bigImage">
   @if(count($product->ProductsPhoto))
       <img src=""  style="width:400px;" alt=""  class="active" id="currentImage">
       @else
       <h1>no picture</h1>
       @endif
   </div>

  <div class="product-section-images">
      @foreach($product->ProductsPhoto as $product)
       <img src="" style="width:200px;" class="card-img" alt="">
       @endforeach
     </div>
   @endforeach

Javascript

   <script>
    (function(){
        const currentImage = document.querySelector('#currentImage');
        const images = document.querySelectorAll('.product-section-images');

        images.forEach((element) => element.addEventListener('click', thumbnailClick));

        function thumbnailClick(e) {
          currentImage.src = this.querySelector('img').src;
            currentImage.classList.remove('active');

            currentImage.addEventListener('transitionend', () => {
                currentImage.src = this.querySelector('img').src;
                currentImage.classList.add('active');
            })

            images.forEach((element) => element.classList.remove('selected'));
            this.classList.add('selected');
        }

    })();
</script>

Any help will be appreciated

via Chebli Mohamed