JSFiddle - React, Tailwind, and code Playground

HTML

<p>Enter any decimal e.g. 99.5 <br/>or any whole number.</p>

<input type="text" class="pickNum" placeholder="Enter decimal e.g. 99.5 or whole numer" size="40"><br/>
<button type="button" onclick="changeNumbers(10)">Start decimal animation</button><br/>
<button type="button" onclick="changeNumbers()">Start whole num animation</button> 
<div id="numbers1">
    <div id="percent" class="changeNum">0%</div>
    <div id="back">BACK</div>
</div>

CSS

#numbers1 {
  position: relative;
  z-index: 1;
  top: 20px;
  left: 33px;
  font-size: 46px;
  color: #791135;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}
#percent {
  position: absolute;
  top: 0px;
  left: 0px;
}
#back {
  position: absolute;
  top: 50px;
  left: 0px;
  letter-spacing: -0.8px;
}

JavaScript

function changeNumbers(dec){
	$('.changeNum').each(function (index) {
		$(this).prop('Counter',0).animate({
			Counter: $('.pickNum').val()
	}, {
		duration: 1500,
		easing: 'swing',
		step: function (now) {
			if(dec === 10) {
					$(this).text( "%");
                } else {
                    $(this).text("%");
                }
            }
		});
	});
}