slender3_NameEditor.js

function App({ url }) {
  return `
    ...
    ${NameEditor({ id: 0 })}
    ${NameEditor({ id: 1 })}
    ${NameEditor({ id: 2 })}
    ...
  `
}

function NameEditor({ id }) {
  return `
    <div class="nameEditor">
      <div>Enter you name:</div>
      <input onKeyUp="NameEditor.onKeyUp(this, ${id})" />
      <div>
        Hello, <span id="nameEditor__name-${id}"></span>
      </div>
    </div>
  `;
}

NameEditor.onKeyUp = (input, id) => {
  document.getElementById(`nameEditor__name-${id}`).innerText = input.value;
};