Help with code, Dynamicly change values when different variant is selected.

[Jake1124]

So I have varients numbers in quantities 50, 100, 150 etc... with the total price set as default price. 

When a user clicks on each varient i want a text underneath updated on each variant change to show the unit price basically dividing the total price with the quantity. 

I managed to create a snippet code called unit-price-calculation.liquid

{% assign current_variant = product.selected_or_first_available_variant %}

{% if current_variant %}
  {% assign variant_quantity = current_variant.title | times: 1 %}
  {% assign variant_price = current_variant.price %}
  {% assign unit_price = variant_price | divided_by: variant_quantity %}

  <div>
    <strong>Current Variant:</strong> {{ current_variant.title }}<br>
    <strong>Unit Price:</strong> {{ unit_price | money }}
  </div>
{% endif %}

And i called this in the main-product.liquid 

{% render 'unit-price-calculation' %}

It works fine, however in order for it to update i need to refresh the page every time a different variation is clicked.

I'm aware this needs to be done on the global.js code page however I'm not sure what and where to put the code in order for the variation to update everytime a different variant it clicked. 

Can someone help me ? I'm using dawn theme. 

[shamak]

I'm having the same problem.