Need to change the variant meta field while switching the variant without page reload

[selvadev13]

I need to show the part number for all product variants. I used variant meta field for that. when, I switch the variant I needs to auto change. This is the code I used to show the variant part number and tried to change the variant. But every time I need to refresh the page to see the updated part number after switching the variant.

I have don't know, how to show the meta field data without refreshing the page. Can anyone help ?

{% assign display_value = "" %}
{% for variant in product.variants %}
  {% if product.selected_or_first_available_variant.id == variant.id %}
    {% if variant.metafields.custom.part_number %}
      {% assign display_value = "Part Number: " | append: variant.metafields.custom.part_number %}
    {% else product.metafields.shopify--facts.mpn %}
      {% assign display_value = "Part Number: " | append: product.metafields.shopify--facts.mpn %}
    {% endif %}
  {% endif %}
{% endfor %}

<p id="display-element">{{ display_value }}</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $(".no-js-hidden").on("click", function() {
    var refreshInterval = setInterval(function() {
      location.reload();
    }, 500);
  });
});
</script>

Thanks 

[Guleria]

Hello @selvadev13 ,

If you are looking for idea please follow.
1) Get the ID of the variant on click of it with the JS.
2) Assign a dynamic ID/attribute with a string to the metafield element.
Now get back to first step 1 and use show/hide concept.

Thanks

[selvadev13]

Hi @Guleria 

Can you show any code examples to achieve this thing ? That would be appreciated : )