JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="item small has-text small-offset-large">
    <div class="inner">
        <a href="" class="">
            <div class="text">
                <div class="title number">
                    <span>2</span>
                </div>
                <div class="sub-title">
                    <span>Marketers</span>
                </div>
            </div>
        </a>
    </div>
</div>

JavaScript

var text_boxes = [{
    number: "2",
    sub_title: "Marketers",
}, {
    number: "75%",
    sub_title: "Average sales increase",
}, {
    number: "4",
    sub_title: "Developers",
}, {
    number: "6",
    sub_title: "Full Time",
}, {
    number: "45",
    sub_title: "Sites Launched",
}, {
    number: "2",
    sub_title: "Marketers",
}];

var arr3 = [];

$.each(text_boxes, function(i, el) {
		arr3.push(el);
    
    setTimeout(function() {
      if (arr3.length === text_boxes.length) {
      
      	var $item = $(".item");
        if($(".item").hasClass("has-text")) {
        		$item.find('.number span').text(arr3[i].number);
            $item.find('.sub-title span').text(arr3[i].sub_title);
        }
    }
   }, i * 1000);
 });