1.output {
2    margin: 20px;
3    padding: 20px;
4    background: gray;
5    border-radius: 10px;
6    font-size: 80px;
7    width: 80px;
8    color: white;
9    float: left;
10}

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
3<div class="output" id="output0">--</div>
4<div class="output" id="output1">--</div>
5<div class="output" id="output2">--</div>

1var numbers = [12, 54, 32, 45, 21, 69, 20];
2function generateNumber(index) {
3  var desired = numbers[index];
4  var duration = 2000;
5
6  var output = $('#output' + index); // Start ID with letter
7  var started = new Date().getTime();
8
9  animationTimer = setInterval(function() {
10    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
11      clearInterval(animationTimer); // Stop the loop
12      output.text(desired); // Print desired number in case it stopped at a different one due to duration expiration
13      generateNumber(index + 1);
14    } else {
15      output.text(
16        '' +
17        Math.floor(Math.random() * 10) +
18        Math.floor(Math.random() * 10)
19      );
20    }
21  }, 100);
22}
23
24generateNumber(0);