Can someone explain what is wrong with my code

const form = document.querySelector('#registrar');
const input = form.querySelector('input');
const ul = document.querySelector('#invitedList');

const main = document.querySelector('.main');
const div = document.createElement('div');
const label = document.createElement('label');
const filter = document.createElement('input');

main.insertBefore(div, ul);
div.appendChild(label);
div.appendChild(filter);
filter.type = 'checkbox';
label.textContent = 'Show Selected Items';

filter.addEventListener('change', function filter(e) {
 const unchecked = ul.children;
 if(e.target.tagName === 'INPUT') {
  for(let i = 0; i < ul.children.length; i += 1) {
    let li = ul[i];
    console.log(ul.children);
   if (li.className === 'responded') {
    li.style.display === '';      
  } else {
    li.style.display = 'none';
  }
  }
 }
});
function createLI(text) {
  function createElement(elementName, property, value) {
    const element = document.createElement(elementName);
    element[property] = value;
    return element;
  }
  function appendElement(elementName, property, value) {
    const element = createElement(elementName, property, value)
    element = li.appendChild(element);
    return element;
  }

  const text= input.value;

  const li = document.createElement('li');

  const span = createElement('span', 'textContent', 'text');

  const label = document.createElement('label');
  label.textContent ='Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';  
  label.appendChild(checkbox);
  li.appendChild(label);

  const editButton = createElement('button', 'textContent', 'Edit')
  li.appendChild(editButton);

  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  li.appendChild(removeButton);

  return li;
}


form.addEventListener('submit', function submit(name) {
  name.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});

ul.addEventListener('change', function styling(e) {
  const checkbox = e.target;
  const checked = e.target.checked;
  const listItem = checkbox.parentNode.parentNode;
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

ul.addEventListener('click', function remove(e) {
const listItem = e.target.parentNode;
const ul = listItem.parentNode;
const button = e.target;
const li = button.parentNode;
 if (button.tagName == 'BUTTON') {
     if (button.textContent === 'Remove') {
      ul.removeChild(listItem);
   } else if (button.textContent === 'Edit') {
     const span = li.firstElementChild;
     const input = document.createElement('input');
     input.type = 'text';
     input.value = span.textContent;
     li.insertBefore(input, span);
     li.removeChild(span);
     button.textContent = 'Save';
   } else if (button.textContent === 'Save') {
     const input = li.firstElementChild;
     const span = document.createElement('span');
     span.textContent = input.value; 
     li.insertBefore(span, input);
     li.removeChild(input);
     button.textContent = 'Edit';
   }
 }
});