JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Reading Simulator</h1>
<small></small>
<p>Paste or write any text you like and let the bot go throuhg the text in avarage human speed<p>
    <label for="speed">Reading speed in miliseconds:<br/>
        <input type="text" id="speed" value="500" />
    </label>
<div id="sim"></div>
 <!-- <textarea id="sim" value=""></textarea> -->
<br/>
<button id="go" >Go! </button>
<button id="stop">Stop!</button>
<div class="summary" id="summary">
    <p id="wordCountBox"></p>
    <p id="timepassed"></p>
    <p id="textRead"></p>
 </div>

CSS

#sim{
    width:400px;
    height:200px;
    border:solid 1px #2e2e2e;
    color:#2e2e2e;
    padding:5px;
    overflow-y:scroll;
}
button{
    padding:10px 25px;
    color:#fafafa;
    transition:all 0.3s;
    cursor:pointer;
}
#go{
    background-color:#46A111;
    border:solid 1px #46A111;
}
#go:hover{
    background-color:#fafafa;
    color:#46A111;
}
#stop{
    background-color:#A11111;
    border:solid 1px #A11111;
}
#stop:hover{
    background-color:#fafafa;
    color:#A11111;
}
p{
    font-family:Arial;
    font-weight:bold;
    color:#2e2e2e;
    padding:5px 10px;
}
b{
    background-color:yellow;
}
h1, p{
    font-family:"Ubuntu", Arial;
}
p{
    padding:0;
    margin:0;
}
label{
    display:block;
    padding:10px 0;
}
input[type="text"]{
    width:400px;
    height:40px;
    border:solid 1px #2e2e2e;
    padding:0 5px;
}
.summary{
    background-color:rgba(0,0,0,0.1);
    border:solid 1px #2e2e2e;
    padding:10px;
    margin-top:10px;
    display:none;
}

JavaScript

$('#sim').each(function(){
    this.contentEditable = true;
});

var go = $('#go');
var stop = $('#stop');
var wordCount = 0;
var wordCountBox = $('#wordCountBox');
var timepassed = $('#timepassed');
var textRead = $('#textRead');
var small = $('small');


go.on("click", function(e){
    e.preventDefault();
    startSim();
});

function startSim(){
    var speed = $('#speed').val();
    timeStart = $.now();
    var sim = $('#sim').text();
    var wordArray = sim.split(" ");
    var simWrap = $('#sim');
    var loopCount = 0;
    
    var arrCount = wordArray.length;
    var alreadyRead = [];
    loopDat();
    var i = loopCount;    
    function loopDat(){
            var pos = loopCount;
            var realSpeed = wordArray[pos].length;
            realSpeed = (realSpeed * (speed / 5));
            // realSpeed = Math.round((realSpeed * 0.1) * speed);
            console.log('Reading speed of current word: '+realSpeed);
            if(loopCount == pos){
                setTimeout(function() { 
                    if(pos < 0){
                        pos = 0;
                    }
                    alreadyRead.push(wordArray[pos]);
                    wordArray[pos] = '<b>'+wordArray[pos]+'</b>';
                    small.text('Current reading speed: '+realSpeed);
                    var words = wordArray.join(" ");
                    simWrap.html(words);                
                    wordCount++;
                    if(pos == (arrCount - 1)){
                        triggerDone();
                    }
                    loopCount++;
                    if(loopCount < arrCount){
                        loopDat();
                    }
                }, realSpeed);
            }
    }
    // Function done
    function triggerDone(){
        wordCountBox.text('Words counted: '+wordCount);
        var timeEnd = $.now();
        var timeRes = timeEnd - timeStart;
        timeRes = parseInt(timeRes);
        timeRes = timeRes / 1000;
       ...