Toggle Class “Done”

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

grocery.addEventListener('submit', (e) => {
  addItem(e);
});

function addItem(e) {
  e.preventDefault();
  let data = document.getElementById('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');

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

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

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

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

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

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

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>