It works perfectly for the first time when i click on the pen icon for changing the name but when I click it for second time, it throws this error. I tried parentNode.insertBefore() but it doesn't work as well

Here is my index.js code for edit button functionality

    const taskEdit = document.getElementById('taskName'); #its just a div with a default text

function edit() {
  if (editBtn.classList.contains('fa-pen-line')) {
    const input = document.createElement('input');
    input.type = 'text';
    input.setAttribute('id', 'edited');
    input.classList =
      'bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-0';
    input.value = span.textContent;
    taskEdit.insertBefore(input, span);
    taskEdit.removeChild(span);
    editBtn.classList.replace('fa-pen-line', 'fa-check');
  }
  editBtn.addEventListener('click', () => {
    if (editBtn.classList.contains('fa-check')) {
      const input = document.getElementById('edited');
      const span = document.createElement('span');
      span.textContent = input.value;
      span.setAttribute('id', 'task');
      taskEdit.insertBefore(span, input);
      taskEdit.removeChild(input);
      editBtn.classList.replace('fa-check', 'fa-pen-line');
    }
  });
}
editBtn.addEventListener('click', edit);

1

Here is an image for the same, when i click pen con to change the name, it successfully changes it for the first time but gives me this DOMexception error if i try to change it again