JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

JavaScript

var test1 = document.getElementById("test1"),
    test2 = document.getElementById("test2"),
    test3 = document.getElementById("test3");

// Using only i (not works)
// Not that i will last with 10, instead of 9 (but it is correct)
for(var i=0; i<10; i++) {
    setTimeout(function() {
        test1.textContent = i;
    }, i * 1000);
}

// Private scope to i (too not works)
for(var i=0; i<10; i++) {
    var x = i;
    
    setTimeout(function() {
        test2.textContent = x;
    }, i * 1000);
}

// Callback scope (workaround)
function set_textContent(i) {
    setTimeout(function() {
        test3.textContent = i;
    }, i * 1000);
};

for(var i=0; i<10; i++) {
    set_textContent(i);
}