<div class="demo">
    <div class="demo__div">
      <span class="ltr">S</span>
    </div>
    <div class="demo__div">
      <span class="ltr">T</span>
    </div>
    <div class="demo__div">
      <span class="ltr">A</span>
    </div>
    <div class="demo__div">
      <span class="ltr">Y</span>
    </div>
    <div class="demo__div">
      <span class="ltr">@</span>
    </div>
    <div class="demo__div">
      <span class="ltr">H</span>
    </div>
    <div class="demo__div">
      <span class="ltr">O</span>
    </div>
    <div class="demo__div">
      <span class="ltr">M</span>
    </div>
    <div class="demo__div">
      <span class="ltr">E</span>
    </div>
    <div class="demo__div">
      <span class="ltr">!</span>
    </div>                                                                                                          
  </div>

body {
    background-color: #1b1b1b;
    height: 100vh;   
    display: flex;
    align-items: center;
    font-family: sans-serif;
}

/* ===== FOR DEMO ===== */
.demo {
    height: 500px; 
    width: 1200px;
    margin: 0 auto;  
    background-color: #fff;
    -webkit-box-shadow: -1px 9px 18px -5px rgba(199,199,199,1);
    -moz-box-shadow: -1px 9px 18px -5px rgba(199,199,199,1);
    box-shadow: -1px 9px 18px -5px rgba(199,199,199,1);
    overflow: hidden;
    border-radius: 10px;
    position: relative;


    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);

}

.demo__div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.demo__div:nth-of-type(1) {
    background-color: #009CE9;
}

.demo__div:nth-of-type(2) {
    background-color: #00BEDB;
}

.demo__div:nth-of-type(3) {
    background-color: #00D2D9;
}

.demo__div:nth-of-type(4) {
    background-color: #16E6B2;
}

.demo__div:nth-of-type(5) {
    background-color: #9EF389;
}

.demo__div:nth-of-type(6) {
    background-color: #FF9671;
}

.demo__div:nth-of-type(7) {
    background-color: #E57B89;
}

.demo__div:nth-of-type(8) {
    background-color: #B56D97;
}

.demo__div:nth-of-type(9) {
    background-color: #7D6592;
}

.demo__div:nth-of-type(10) {
    background-color: #4B597A;
}

/* ====== MAIN CODE ===== */
.ltr {
    font-size: 100px;
    font-weight: 400;
    text-transform: uppercase;
}

$(document).ready(function () {
    var letters = ['H', 'E', 'L', 'L', 'O', 'W', 'O', 'R', 'L', 'D'];
    setBase();
    var ctr = 0;


    function helloWorld() {
        var nthElem = selectElem();
        var randNum = randomNum();
        // var ctr = randomNum();
    
        $('.demo__div:nth-child('+nthElem+') .ltr').html(String.fromCharCode(randNum));
        $('.demo__div:nth-child('+nthElem+') .ltr').attr('data-num', ctr);
        ctr++;
    
        $('.demo__div .ltr').each(function() {
            var num = parseInt($(this).attr('data-num'));
            var based = parseInt($(this).attr('data-based'));
    
            if(num > based) {
                index = $('.ltr').index(this);
                $(this).html(letters[index]);
            }
    
        }); 
    }

    setTimeout(function() {
        setInterval(helloWorld, 20)
    }, 500);
    
});




function selectElem(){
    var elemLength = $('.ltr').length;
    return Math.round(Math.random() * elemLength + 1);
}

function randomNum() {
    return Math.round(Math.random() * 120) + 34;
}

function setBase() {
    $('.ltr').each(function() {
        based = Math.round(Math.random() * 100);
        $(this).attr('data-based', based);
    });    
}