Display x amount left until discount - liquid Shopify

Question

I want to show a message how much client needs to spend more until he gets additional discount. I have 4 discounts setup in shopify discounts. 2% off entire order • Minimum purchase of €81.00 3% off entire order • Minimum purchase of €61.00 2% off entire order • Minimum purchase of €41.00 5% off entire order • Minimum purchase of €20.00

   {% assign cart_total = cart.total_price | divided_by: 100 %}
   {% assign discount1_threshold = 81 %}
   {% assign discount2_threshold = 61 %}
   {% assign discount3_threshold = 41 %}
   {% assign discount4_threshold = 20 %}

   {% if cart_total < discount4_threshold %}
    Amount until 5% discount {{ discount4_threshold | minus: cart_total }}€
   {% elsif cart_total < discount3_threshold %}
    Amount until 2% discount {{ discount3_threshold | minus: cart_total }}€
   {% elsif cart_total < discount2_threshold %}
    Amount until 3% discount {{ discount2_threshold | minus: cart_total }}€
   {% elsif cart_total < discount1_threshold %}
    Amount until 2% discount {{ discount1_threshold | minus: cart_total }}€
   {% else %}
    Congrats! You've reached maximum discount value.
   {% endif %}

So I managed to achieve this behaviour with liquid in shopify ( I want it to show in side cart )

However, it needs to be refreshed everytime you add to cart to update the message. I've tried using JS but sadly couldn't make it work. How do I make it happen? Any help or tips appreciated.

I've tried using JS but sadly couldn't make it work.