I tried to convert a simple function to vanilla js and the first code block is working just fine, but there is some weird thing going on and I can not seem to figure out how to get this to work. All I am trying to do here is have a direct conversion and this code is not working.

here is the original code with jquery

const obj = {
   updateProductImages() {
      var $slideshow = $('[data-product-images]')

      $('.swiper-pagination').html('');
        
      $slideshow.html('')

      this.selected_product.images.forEach((image, index) => {
         $slideshow.append(`
            <div id="Image${image.id}" class="Product__SlideItem Carousel__Cell" data-image-position="${index}" data-image-id="${image.id}">
              <div class="pw-ratio">
                <div class="pw-ratio__fill"></div> 
                <div class="pw-ratio__inner">
                  <img src="${_utils.resizeImage(image.src, 'x1600')}" />
                </div>
              </div>
            </div>
          `)
        })
   }
}

The above code works perfect, but I am refactoring a site to use only js so I can stop importing jquery.

here is my refactored code:

const obj = {
   updateProductImages() {
      //var $slideshow = $('[data-product-images]')
      const $slideshow = document.querySelectorAll('[data-product-images]')

      //$('.swiper.pagination').html('') 
      document.querySelector('.swiper-pagination').innerHTML = ''
      
      //$slideshow.html('')
      $slideshow.forEach(item => {
         item.innerHTML = ''
      })
      
      this.selected_product.images.forEach((image, index) => {
         $slideshow.forEach(item => {
            item.insertAdjacentHTML('beforeend', `
               <div id="Image${image.id}" class="Product__SlideItem Carousel__Cell" data-image-position="${index}" data-image-id="${image.id}">
                <div class="pw-ratio">
                  <div class="pw-ratio__fill"></div> 
                  <div class="pw-ratio__inner">
                    <img src="${_utils.resizeImage(image.src, 'x1600')}" />
                  </div>
                </div>
              </div>
            `)
          })
      }
   }
}

I can't believe I've spent hours on this, on something that should be an easy fix. The code in the second block does not work, I did also try using $slideshow += `...` and that did not work either.