Update Item

let grocery = document.getElementById('grocery-form');
let writeList = document.getElementById('writeList');
let currentItem = null;

grocery.addEventListener('submit', (e) => {
  e.preventDefault();
  if (currentItem) {
    updateItem();
  } else {
    addItem();
  }
});

function addItem() {
  let data = writeList.value;
  let list = document.querySelector('ul');
  let item = document.createElement('li');
  let text = document.createElement('span');
  let icons = document.createElement('span');
  let removeBtn = document.createElement('i');
  let doneBtn = document.createElement('i');
  let updateBtn = document.createElement('i');

  item.classList.add('list-group-item');
  icons.classList.add('icons');
  removeBtn.classList.add('icon-delete');
  doneBtn.classList.add('icon-check');
  updateBtn.classList.add('icon-update');

  text.textContent = data;
  writeList.value = '';
  list.append(item);
  icons.append(doneBtn, updateBtn, removeBtn);
  item.append(text, icons);

  removeBtn.addEventListener('click', (e) => {
    deleteItem(e);
  });

  item.addEventListener('click', (e) => {
    doneItem(e);
  });

  updateBtn.addEventListener('click', (e) => {
    editItem(e, text);
  });
}

function deleteItem(e) {
  e.target.parentElement.parentElement.remove();
}

function doneItem(e) {
  e.target.classList.toggle('done');
}

function editItem(e, text) {
  writeList.focus();
  writeList.value = text.textContent;
  currentItem = text;
}

function updateItem() {
  currentItem.textContent = writeList.value;
  writeList.value = '';
  currentItem = null;
}

HTML

<form id="grocery-form" class="form">
  <div class="form-input">
    <input
      type="text"
      class="form-control"
      id="writeList"
      aria-describedby="Write grocery item"
      placeholder="Add new item"
      required
    />
    <button type="submit" class="btn btn-warning">Submit</button>
  </div>
</form>
<ul class="list-group"></ul>