How to display custom input in product variant with metafields?

[SmallDeveloper]

I wanted to display a custom input, according to the metafields (true/false). when true is selected, then only that product variant should display the input field.

the code that I tried to use -

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign show_name_inclusion = current_variant.metafields.custom.show_name_inclusion %}
{{ show_name_inclusion }}

{% if show_name_inclusion == true %}
  
  <style>
    .custom.form__label { margin-bottom: 0.6rem; }
    .field.custom { margin-top: 0; }
    .custom .field__input { padding-top: 0.8rem; }
  </style>
  <label class="form__label custom" for="personalization">Personalization</label>
  <div class="field custom">
    <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="personalization" name="properties[Personalization]" required maxlength="10"> 
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        document.querySelector("form[novalidate]").removeAttribute("novalidate");
      });
      document.querySelector('#personalization').addEventListener('input', (e) => {
        if (!document.querySelector('label[for="personalization"] span')) {
          const span = document.createElement("span");
          span.style.marginLeft = '10px';
          document.querySelector('label[for="personalization"]').appendChild(span);
        }
        document.querySelector('label[for="personalization"] span').style.display = 'inline';
        document.querySelector('label[for="personalization"] span').textContent = e.target.value.length + ' | ' + 10;
        if (e.target.value.length === 0) {
          document.querySelector('label[for="personalization"] span').style.display = 'none';
        }
      });
    </script>
  </div>
{% endif %}

when I select standard -

when Select Custom -

when I refresh/reload on custom variant -

then I select the Standard -

I believe something need to be added in global.js to make this issue solve. I have to reload to see the result but this not how a website should work.

Can anyone help me with this?