I'm using a Bootstrap theme and I wanted the image gallery on the theme's image display page to load via AJAX. Photos come as JSON with AJAX but I couldn't get them to show on the page.

The gallery related part of this theme from the original JS file:

var productGallery = function () {
                    var gallery = document.querySelectorAll('.product-gallery');
                    if (gallery.length) {
                        var _loop8 = function _loop8(i) {
                            var thumbnails = gallery[i].querySelectorAll('.product-gallery-thumblist-item'),
                                previews = gallery[i].querySelectorAll('.product-gallery-preview-item');
                            for (var n = 0; n < thumbnails.length; n++) {
                                thumbnails[n].addEventListener('click', changePreview);
                            } // Changer preview function
                            function changePreview(e) {
                                e.preventDefault();
                                for (var _i3 = 0; _i3 < thumbnails.length; _i3++) {
                                    previews[_i3].classList.remove('active');
                                    thumbnails[_i3].classList.remove('active');
                                }
                                this.classList.add('active');
                                gallery[i].querySelector(this.getAttribute('href')).classList.add('active');
                            }
                        };
                        for (var i = 0; i < gallery.length; i++) {
                            _loop8(i);
                        }
                    }
                }();

Data from JSON file with Ajax:

some AJAX code..
if (slidePhotos.photos) {
    for (let x= 0; x< slidePhotos.photos.length; x++) {
        document.getElementById('gallery_photos_div').innerHTML += '<div class="product-gallery-preview-item" id="' + x+ '"><img src="' + slidePhotos.photos[x].url + '" alt=""></div>';

       document.getElementById('gallery_thumbs_div').innerHTML += '<a class="product-gallery-thumblist-item" href="#' + x+ '"><img src="' + slidePhotos.photos[x].url + '"></a>';
    }
}

The HTML Code is generated but unfortunately the images do not change when I click on it.

Sample JSON:

[
   {
   "url":"https://example.com/image1.jpg",
   "url":"https://example.com/image2.jpg"
   }
]

Can you tell me where I made a mistake?