slender3_NameEditor2.js

function NameEditor({ id }) {
  // Add color to distinguish name editors
  const color = {
    0: '#b6e1c1',
    1: '#b7c4ed',
  }[id];

  return `
    <div class="nameEditor" style="background: ${color}">
      ...
      Hello, <span class="nameEditor__name-${id}"></span>
      ...
    </div>
  `;
}

NameEditor.onKeyUp = (input, id) => {
  const elems = document.getElementsByClassName(`nameEditor__name-${id}`);

  for (const elem of elems) {
    elem.innerText = input.value;
  }
};