pf metafields variants

{% for variant in product.variants %}
<div class="metafields-variants" id="{{variant.id}}">
{{ variant.metafields.YOUR_VARIANT_NAME }}
</div>
{% endfor %}


window.addEventListener("load", function () {
const swatches = document.querySelectorAll('.pf-option-swatches [data-option-name]');
const metaVariants = document.querySelectorAll('.metafields-variants');
swatches.forEach(swatch => {
    const updateMetafield = () => setTimeout(() => {
      let inputVariant = swatch.closest('[data-pf-type="ProductVariantSwatches"]').querySelector('[data-product-id]')
    let variantId = inputVariant.getAttribute('value')
    metaVariants.forEach(g => {
      g.setAttribute('style', g.getAttribute('id') === variantId ? 'display: block;' : 'display: none;')
    })
    }, 0)
    updateMetafield();
    swatch.addEventListener('click', updateMetafield)
})
});