How can I display variant as a drop-down option for a specific product?

Store Design
1

Hello Expert,

I want to display the variant as a drop-down option for only one product based on the product tag. But the price does not change when the variant is selected.

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% if found_option %}
  {% if product.tags contains 'specialblend' %}
    Size

    
  {% else %}
    

      {% for variant in product.variants %}
        {% assign value = variant.options[option_index] %}
        {% unless values contains value %}
          {% assign values = values | join: ',' %}
          {% assign values = values | append: ',' | append: value %} 
          {% assign values = values | split: ',' %}
          
          

          

            {% if is_color %}
              
{{ value }}

            {% endif %}
            {% if is_color %}
              
            {% else %}
              
            {% endif %}
          

        {% endunless %}
      {% endfor %}
    

  {% endif %}
{% endif %}

{% if found_option %}
  
{% endif %}

Used the below script but it displayed the price 2 times one with updated pricing other with static price.

document.addEventListener('DOMContentLoaded', function() {
  var variantSelector = document.querySelector('#variant-select');
  var priceElements = document.querySelectorAll('.variant-price');

  // Add event listener to detect variant changes
  variantSelector.addEventListener('change', function () {
    var selectedVariantId = variantSelector.value;
    priceElements.forEach(function (priceElement) {
      var variantId = priceElement.getAttribute('data-variant-id');
      if (variantId === selectedVariantId) {
        priceElement.style.display = 'block';
      } else {
        priceElement.style.display = 'none';
      }
    });
  });

  // Trigger variant change event on page load to display initial price
  if (variantSelector) {
    var event = new Event('change');
    variantSelector.dispatchEvent(event);
  }
});

What could be the problem?

Thank you for your help