JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>document</title>
</head>
<body>
 <ul id="ul_list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>
</body>
</html>

JavaScript

let list = document.querySelector('#ul_list');
list.addEventListener('click', e => {
  if (!e.target.value) {
    [...list.children].forEach(item => {
      let inp = item.querySelector('input');
      if (inp) {
        inp.remove();
        item.innerHTML = inp.value;
      }

    })
  }
  if (e.target.tagName === 'LI') {
    e.target.innerHTML = `<input type="text" value="${e.target.textContent}">`;
  }
})