Can someone explain why this for loop does not take into account newly added list items?

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;

addElement = (type, className, textContent) => {
  const element = document.createElement(type)
  element.className = className;
  element.textContent = textContent;
  return element;
}

function attachListItemButtons (li) {
  let up = addElement('button', 'up', 'Up');
  li.appendChild(up);

  let down = addElement('button', 'down', 'Down');
  li.appendChild(down);

  let remove = addElement('button', 'remove', 'X');
  li.appendChild(remove);
}

testForFirstLastItem = () => {
  for (let i = 0; i < lis.length; i += 1) {
    if (lis[i] == firstListItem) {
      console.log(lis[i]);
      lis[i].getElementsByClassName('up')[0].style.visibility = 'hidden';
    } if (lis[i] == lastListItem) {
      console.log(lis[i]);
      lis[i].getElementsByClassName('down')[0].style.visibility = 'hidden';
    } else if (lis[i] != firstListItem && lis[i] != lastListItem) {
      console.log(lis[i]);
      lis[i].getElementsByClassName('up')[0].style.visibility = 'visible';
      lis[i].getElementsByClassName('down')[0].style.visibility = 'visible';
    }
  } 
}

for (let i = 0; i < lis.length; i += 1) {
  attachListItemButtons(lis[i]);
} 

// Button interaction (Up, Down and Remove)
listUl.addEventListener('click', (event) => {
  if (event.target.tagName == 'BUTTON') {
    if (event.target.className == 'remove') {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    } if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
        ul.insertBefore(li, prevLi);
      }
    } if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
      }
    }
    testForFirstLastItem();
  }
});

// Hide Show
toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

// Change text on click
descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

// Add new li through input
addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
  testForFirstLastItem();
});

testForFirstLastItem();