JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<div class="list-container">
    <ul>
        <li class="box1" id="listitem1"></li>
        <li class="box2" id="listitem2"></li>
        <li class="box2" id="listitem3"></li>
        <li class="box1" id="listitem4"></li>
        <li class="box2" id="listitem5"></li>
    </ul>
</div>

JavaScript

var str = {
    listitem1: 'write the first item',
    listitem2: 'write the second item',
    listitem3: 'write the third item',
    listitem4: 'write the fourth item',
    listitem5: 'write the fifth item'
};
var delay = 0;
$('.list-container li').each(function () {
    var z = $(this).attr('id');
    var str2 = str[z];
    for (var i = 0; i <= str2.length; i++) {
        (function (str2) {
            delay += 100 + Math.floor(Math.random() * 11) * 6;
            setTimeout(function () {
                appendStr(str2);
            }, delay);
        })(str2[i])
    }

    function appendStr(str2) {
        $('#' + z).append(str2);
    }
    $(this).css('color', 'red');
});