JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div data-count-to="143" class="js-count-to"></div>

CSS

.number-container{
    display: block;
    height: 18px;
    overflow: hidden;
    float: left;
}

JavaScript

function jsCountTo(){
    $(".js-count-to").each(function(){
        var container = $(this);
        var numberList = [];
        for(var i = 0; i < 10;   i++){
            numberList.push("<div>"+i+"</div>");
        }
        numberList.push("<div>"+0+"</div>");
        var countAmount = container.data("count-to")+"";
        countAmount = countAmount.split("");
        var numbers = [];
        for(var i = 0; i < countAmount.length; i++){
            numbers[i] = {};
            numbers[i].number = countAmount[i];
            numbers[i].element = document.createElement("div");
            numbers[i].element.classList.add("number-container");
            numbers[i].element.innerHTML = "<div class='number-list'>"+numberList.join("")+"</div>";
            container.append(numbers[i].element);
        }
        console.log(numbers);
    });
    
}
jsCountTo();