Why isn't my discount percentage changing with different product variants?

Store Design
1

Hello,

I’m using this line of code to display how much percentage customers are saving, but the numbers aren’t changing when I select variants.

Can someone help me?

https://cyrixshealth.com/products/acv-gummies-test

Thank you in advance.

{% if product.compare_at_price_max > product.price %}
You Save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off 
({{ product.compare_at_price_max | minus: product.price | money_with_currency }})
{% endif %}
2

I figured it out with Javascript.

Here’s a code if anyone is having a similar problem or wanting to create the same.

I’m sure there’s a cleaner code to do this, but this is what I quickly came up with.

<script>
window.onload = function () {
document.getElementById('xyz').onclick = function() { 
document.getElementById("displaySaving").innerHTML = "Save 13% ($5.00)"; }
  document.getElementById('xyz').onclick = function() { 
document.getElementById("displaySaving").innerHTML = "Save 28% ($20.00)"; }
  document.getElementById('xyz').onclick = function() { 
document.getElementById("displaySaving").innerHTML = "Save 34% ($35.00)"; }
  document.getElementById('xyz').onclick = function() { 
document.getElementById("displaySaving").innerHTML = "Save 37% ($50.00)"; }
  document.getElementById('xyz').onclick = function() { 
document.getElementById("displaySaving").innerHTML = "Save 40% ($80.00)"; }
}
</script>