JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li class="discounted-price">180.99</li>
<li class="special">Grand Total: £<b id="price">186.95</b></li>
</ul>

<a class="trigger" href="#">Link</a>

JavaScript

(function ($) {

    $(function () {
        "use strict";

        $(document).ready(function () {

            // Animate the element's value from x to y:
            $('.trigger').live('click', function () {
                var originalprice = $('#price').text();
                var discount = $('.discounted-price').text();

                $({
                    someValue: originalprice
                }).animate({
                    someValue: discount
                }, {
                    duration: 3000,
                    easing: 'swing',
                    // can be anything
                    step: function () {                       $('#price').text(parseFloat(this.someValue).toFixed(2));
                    }
                });

            });
        });

    });



})(jQuery);