<div class="ani">
<div class="counterup" data-count="15">0</div>
<div class="counterup" data-count="20">0</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Function to animate number count-up
function animateCountUp(element) {
var finalCount = parseInt($(element).attr('data-count'));
var duration = 3000; // Adjust duration as needed
var interval = 50;
var increment = finalCount / (duration / interval);
var currentCount = 0;
var counter = setInterval(function() {
currentCount += increment;
if (currentCount >= finalCount) {
clearInterval(counter);
currentCount = finalCount;
}
$(element).text(Math.round(currentCount));
}, interval);
}
// Check for the addition of 'active' class and trigger count-up animation
$('.ani').on('click', function() {
$(this).find('.counterup').each(function() {
animateCountUp(this);
});
});
});
</script>