Creating images with Ajax

[Editor]

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 help me where I made a mistake?