Automatic form filling and dynamic product image

In my image preview light box I added buttons to view and copy the unique tag of an image, which is effectively its unique descriptor, and a button which takes you to the shop product which allows purchasing any of the viewed art works. However, that product relies on filling out a form with the unique tag of the art work which can be begotten from the preview light box. To not inconvenience the user with copying and pasting, or forgetting to copy the tag before clicking the buy button in the preview light box, I wrote the code below to automatically fill out the unique tag field of my form when the user goes on to purchase the art work on the product page. To do this I first store the unique tag identifier of the viewed art piece in session storage (and to clipboard for good measure). Next the user is redirected to the product page with an url parameter, upon which I monitor the page for the specific form field to appear and subsequently fill it out with the information from session storage. Below I will first give the little piece of code from my light box code, which stores the tag and redirects the user, then the code for the actual monitoring and filling out the form field. As of the last update, it also augments the product image to the one selected from the gallery.

HTML:

JAVASCRIPT:

<!--INCOMPLETE TAG STORE AND REDIRECT CODE-->
} else if (event.target.classList.contains('custom-lightbox-buy-button')) {
const textToCopy = galleryItems[currentIndex].alt
sessionStorage.setItem('uniqueTag', textToCopy);
const imageURL = galleryItems[currentIndex].src;
copyToClipboard(textToCopy);  
let productURL = "/shop/p/original-poster";
let queryParam = "view";
let queryValue = "acquire";
let fullURL = `${productURL}?${queryParam}=${queryValue}`;
window.location.href = fullURL;
}

<!--ANY PRINT PRODUCT PURCHASE AUTOMATIC FORM FILLING AND IMAGE DISPLAY-->
<script>
document.addEventListener('DOMContentLoaded', function () {
let productURL = "/shop/p/original-poster";
let queryParam = "view";
let queryValue = "acquire";
let fullURL = `${productURL}?${queryParam}=${queryValue}`;
let expectedPath = productURL;
let expectedSearch = `?${queryParam}=${queryValue}`;  
if (window.location.pathname === expectedPath && window.location.search === expectedSearch) {
const commentSection = document.getElementById("commentsMainContainer");
commentSection.style.display = 'none';
//display the gallery image as product image
const storedImageUrl = sessionStorage.getItem('imageURL');
if (storedImageUrl){
const newImageDiv = document.createElement('div');
newImageDiv.id = 'newProductImageDiv';
const newImage = new Image();
newImage.src = storedImageUrl; 
newImage.alt = 'custom-product-image';
newImage.id = 'newProductImage';
newImageDiv.appendChild(newImage);
const imageContainer = document.querySelector('.ProductItem-gallery-slides-item');    
const oldImage = document.querySelector('.ProductItem-gallery-slides-item-image');
const oldImageZoomVersion = document.querySelector('.product-image-zoom-duplicate');
const oldImageZoomVersionImage = oldImageZoomVersion.querySelector('img');
imageContainer.appendChild(newImageDiv);
oldImage.style.display = 'none';
oldImageZoomVersion.src = storedImageUrl;
oldImageZoomVersion.setAttribute('data-src', storedImageUrl);
oldImageZoomVersion.setAttribute('data-image', storedImageUrl);
oldImageZoomVersionImage.src = storedImageUrl;
oldImageZoomVersionImage.setAttribute('data-src', storedImageUrl);
oldImageZoomVersionImage.setAttribute('data-image', storedImageUrl);
}
//fill in the form with the image tag
const storedUniqueTag = sessionStorage.getItem('uniqueTag');
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1) { 
const label = node.querySelector('.title[for]');
if (label && label.textContent.trim().toLowerCase().includes("unique image tag")) {
const textareaId = label.getAttribute('for');
const textarea = document.getElementById(textareaId);
if (textarea) {
textarea.value = storedUniqueTag;
}
}
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
//exit
}
});
</script>

CSS:

#newProductImageDiv {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 0;
  box-sizing: border-box;
}
#newProductImage {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border: 15px solid #000000;
  box-sizing: border-box;
}

If you would like to see how the storing and redirecting code is used in the complete example, please see my snappy light box post.