JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text" class="animated"></div>
<div id="value" class="animated"></div>

JavaScript

var dataArray = [12,13,14,15,16,17,18,19];
var dataFromServer = [
{ 'name': 'Value1', 'position': 1608.55434},
{ 'name': 'Value2', 'position': 60.66757},  
{ 'name': 'Value3', 'position': 1608.55434},
{ 'name': 'Value4', 'position': 60.66757},  
];
function showTextValue(){
var index = Math.floor(Math.random() * dataArray.length);
var randomVal = dataArray[index];
if(randomVal === null || randomVal === undefined){
    randomVal = '21';
}

var cnt = 0;
// d3.json('/api/'+randomVal, function(error,dataFromServer) { 
  $.each(dataFromServer, function(i,value){
  var txt = value;
  console.log(txt.name);
  xCnt = i;
    function AnimateOneByOne()
    {   
        if(txt.position != null){
        $("#text").html(txt.name).addClass('slideInLeft');
        $("#value").html(txt.position.toFixed(2)).addClass('slideInLeft');
        $('#text').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          $(".animation0").removeClass('slideInLeft');
        });
        }    
    }
  setInterval(AnimateOneByOne, 2000);
 // time++;
  //});
  var delay= setInterval(showTextValue,5000);
}); 
}
var showtxtInterval = setInterval(showTextValue,5000);