Show images based on Selected Variant only in trade theme?

[Satyaraj]

I implemented custom code in my trade theme so that the images can be displayed only on the basis of Size variant and used alt text in images for that but now i find the issue that whenever i change the variant. The previous variant first thumbnail image is displayed in  current variant thumbnail images  even though after clicking on it the image don't go to previous variant. I just want to hide that previous variant image when variant is changed.

and for custom code i added the following in the product-media-gallery.liquid file
{% if product.selected_or_first_available_variant.featured_media.alt != media.alt
and product.selected_or_first_available_variant.featured_media.alt != blank
%}
style="display: none;"
{% endif %}
thumbnail-alt="{{ media.alt }}"
 

and the following in global.js file

filterImgVariant() {
// Hide all thumbnails initially
document.querySelectorAll("[thumbnail-alt]").forEach((img) => {
img.style.display = "none";
});

// Show thumbnails matching the current variant's featured media alt
if (
this.currentVariant.featured_media &&
this.currentVariant.featured_media.alt
) {
const currentImgAlt = this.currentVariant.featured_media.alt;
const thumbnailSelector = `[thumbnail-alt='${currentImgAlt}']`;
document.querySelectorAll(thumbnailSelector).forEach((img) => {
img.style.display = "block";
});
} else {
// If no featured media alt is present, show all thumbnails
document.querySelectorAll("[thumbnail-alt]").forEach((img) => {
img.style.display = "block";
});
}
}
and i have three sizes : 'Regular','Large' and 'Extra Large'.
Can anyone please help me.Thanks in advance.

[MRamzan]

You can display selected color imaes: