JSFiddle - React, Tailwind, and code Playground
HTML
<div id="results"></div>
JavaScript
var displayResults = function(data){
var i = 0;
var int = setInterval(function(){
if( i <= data.length){
$('#results').append('<div class="result" style="display:none;">' +
'<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' +
'<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +
'<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +
'<input type="hidden" name="id[]" value="' + data[i].id + '">' +
'<input type="hidden" name="username[]" value="' + data[i].username + '">' +
'<input type="hidden" name="email[]" value="' + data[i].email + '">' +
'</div>');
$('.result').fadeIn(20);
i++;
} else {
clearInterval(int);
}
}, 300);
};
var d = [{
'id': 43,
'firstname': 'john',
'lastname': 'doe',
'email': '[email protected]',
'phone_number': '555-555-5555',
'username': 'jdoe',
},{
'id': 44,
'firstname': 'susie',
'lastname': 'doe',
'email': '[email protected]',
'phone_number': '555-555-5555',
'username': 'sdoe',
},{
'id': 45,
'firstname': 'ted',
'lastname': 'doe',
'email': '[email protected]',
'phone_number': '555-555-5555',
'username': 'tdoe',
}];
displayResults(d);