How to animate a number to count up or down in a Qualtrics question

Qualtrics.SurveyEngine.addOnReady(function()

{

  // Create a variable to store the number to count up to. 

  // In this example, the value of this variable comes from the survey flow.

  var cirlces_n = parseInt("${e://Field/circles}");

  // Create a function that will animate any text with a certain id in the HTML

  // This function will count from a 'start' number until an 'end' number in 'duration' milliseconds

  function animateValue(id, start, end, duration) {

    var range = end - start;

    var current = start;

    var increment = end > start? 1 : +1;

    var stepTime = Math.abs(Math.floor(duration / range));

    var obj = document.getElementById(id);

    var timer = setInterval(function() {

        current += increment;

        obj.innerHTML = current;

        if (current == end) {

            clearInterval(timer);

        }

    }, stepTime);

  }

  // Call the animateValue function when someone clicks on a button with the id "btn1"

  jQuery( "#btn1" ).click(function() {

    animateValue("value1", 0, cirlces_n, 1600); // animate the text with id = "value1"

  });

});

<div><button id="btn1">Get My Circles!</button></div>

<div>My circles: <span id="value1">0</span></div>