JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h1>
    List of persons
  </h1>
  <ol id="mylist1">
  </ol>

  <h1>
    Another list of persons
  </h1>
  <ol id="mylist2">
  </ol>

  <p>
    Check out the scoping of <emph>var</emph>. Do you prefer scoping on the functionlevel or on the block level? What could happen in an asynchorous setting?
  </p>
</div>

JavaScript

// old format (before ES6)
function es5() {
  var persons = [];
  persons[0] = "Joe";
  persons[1] = "Jane";
  persons.push("Mary")
  persons.push("Greg")

  var list = document.getElementById("mylist1");
  for (var i of persons) {
    var item = document.createElement("li");
    var node = document.createTextNode(i);
    item.appendChild(node);
    list.appendChild(item);
  }
  alert("ES5\nitem = " + item + "\ni = " + i);
}

// ES6
function es6() {
  let persons = [];
  persons[0] = "Joe";
  persons[1] = "Jane";
  persons.push("Mary")
  persons.push("Greg")

  let list = document.getElementById("mylist2");
  for (const i of persons) {
    let item = document.createElement("li");
    let node = document.createTextNode(i);
    item.appendChild(node);
    list.appendChild(item);
  }
  try {
    alert("ES5\nitem = " + item + "\ni = " + i);
  } catch (e) {
    if (e instanceof ReferenceError) {
      alert(e)
    }
  }
}

es5();
es6();