JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>1</li>
  <li>12</li>
  <li>356</li>
  <li>dfhg</li>
  <li>fghsfg</li>
</ul>
<ul>
  <li>1</li>
  <li>12</li>
  <li>356</li>
  <li>dfhg</li>
  <li>fghsfg</li>
</ul>

JavaScript

const liCollection = document.getElementsByTagName('li');

Array.from(liCollection).forEach(li => {
  li.addEventListener('click', editLi);
})

function editLi(evt) {
  const li = event.target.closest('li')
  // do nothing, if input exists
  if (li.querySelector('input')) return 

  removeOtherInput()

  const input = document.createElement('input');
  input.value = li.textContent;
  li.innerHTML = '';
  li.appendChild(input);
}

function removeOtherInput() {
  Array.from(liCollection).forEach(li => {
    const input = li.querySelector('input')
    if (input) {
      li.textContent = input.value
    }
  })
}