Review my code for the challenge by Guil

// I tried to remove the "Up" button from the first list item (not hide) even when there is a change in the 
//placement of the buttons due to user activity.

// When a fifth list item (at index of 4) is added this code doesn't work.

//You are free to comment. Please make this code better in its functionality and help me learn more.

// There are many problems in the functionality like after removal of the button "Up" and "Down" the buttons next to them
// adopt their design pattern. Kindly help fix and let me know how you did it.



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 lis = listUl.children;
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
var li;

//This function when called upon will add three button items to each of the list items
function addButtonsToList(li) {
  var btnUp = document.createElement('button');
  btnUp.className = "up";
  btnUp.textContent = "Up";
  li.appendChild(btnUp);

  var btnDown = document.createElement('button');
  btnDown.className = 'down';
  btnDown.textContent = 'Down';
  li.appendChild(btnDown);

  var btnRemove = document.createElement('button');
  btnRemove.className = "remove";
  btnRemove.textContent = "Remove";
  li.appendChild(btnRemove);
}


function removeButtonsFromList(li) {// function will be called upon after change in the first list item to remove the "Up" button
  li.removeChild(li.firstElementChild);
}

function removeDownButton (li) { // this code removes "down" button from the last list item after there is a change in the buttons placement
  li.removeChild(li.querySelector('button.down'));
}

function addDownButtonOnly2ndLastListItem (li) { // to add "down" button again after it gets removed form the second to last list item
  var btnDown = document.createElement('button');
  btnDown.className = 'down';
  btnDown.textContent = 'Down';
  li.insertBefore(btnDown, li.children[1]);
}

function addUpButtonOnlyToList2(li) { // code to add "Up" button again after it is removed from the second list item by the user
  var btnUp = document.createElement('button');
  btnUp.className = "up";
  btnUp.textContent = "Up";
  li.insertBefore(btnUp, li.children[0]);
}



//The function declared below forms the three buttons namely "Up", "Down", and "Remove"
function formButtons() {
  for (i = 0; i < lis.length; i += 1) { // for loop, 'lis' is HTMLCollection of list items)
    if (i == 0) {  //we want to remove the 'Up' button in the first element with this condition
      addButtonsToList(lis[i]); //function call which add the buttons to specified place on page as per the loop and condition
      let firstBtn = lis[i].firstElementChild; // select the first button
      lis[i].removeChild(firstBtn); //remove the 'Up' button here
    } else if (i == 3) { //the 'down' button is removed from the last list item (last li has index of 3)
      addButtonsToList(lis[i]); //function call to add buttons
      let lastBtn = lis[i].lastElementChild.previousElementSibling; // select the 'down' button in the last list item
      lis[i].removeChild(lastBtn); // remove the down button in the last list item
    }
    else {
      addButtonsToList(lis[i]); //add all three button to the second and third list item
    }
  }
}



listUl.addEventListener('click', (event) => { //code in the line 33 to line 56 was already written by guil hernandez 
  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);
      }
    }
  } // code upto here is written by guil hernandez


  // In the code below we check that if after clicking 'up' or 'down' button in the page 
  // the 'Up' button from the second list item (index 1) has taken a new place in the place
  // of the first list item. Also note that this code will only run when any of buttons in the Ul Lists is clicked
  if (lis[0].querySelector('button.up')) { 
    removeButtonsFromList(lis[0]); // if there is an "Up" button in the first list item we remove it here
    addUpButtonOnlyToList2(lis[1]);// and whenever there is an "up" button in the first list after pressing a button that means we will need to add an up button in the second list item
  }

  //similar to the code above the below code checks for the presence of "Down" button 
  //in the last list item and remove it. This code also adds a "Down" button 
  //in the penultimate list item. 
  if (lis[3].querySelector('button.down')) {
    removeDownButton (lis[3]);
    addDownButtonOnly2ndLastListItem (lis[2]);
  }
}); // Event Listner code ends here

toggleList.addEventListener('click', () => {//code from line 76 to line 100 was written by guil hernandez
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  }
  else {
    toggleList.textContent = 'Show list';
    listDiv.style.display = 'none';
  }
});


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


addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
}); //code from line 91 to here is written by guil hernandez


formButtons(); //This is a function Call to form the three buttons on the page