JSFiddle - React, Tailwind, and code Playground

by Aleksey Shukilovich

HTML

<ul>
  <li>12311</li>
  <li>12111</li>
  <li>1234</li>
  <li>1531</li>
  <li>12321</li>
</ul>

JavaScript

let list = document.querySelector('ul');

function closeInputs(ul) {
	const editedLi = ul.querySelectorAll('li.edited');
  
  for(const li of editedLi) {
  	li.classList.remove('edited');
    li.innerHTML = li.firstElementChild.value;
  }
}

list.addEventListener('click', (e) => {
	if (e.target.closest('li.edited')) return;
  
  const input = document.createElement('input');
  const li = e.target.closest('li');

  input.value = li.innerText;
  li.classList.add('edited');
  li.innerHTML = '';
  li.appendChild(input);
  input.focus();
});

list.addEventListener('focusout', (e) => {
	if (e.target.tagName !== 'INPUT') return;
  
	closeInputs(list);
})