Sharing my solution to the problem

Hi All - just sharing my solution to the problem at the end of the video. Please have a look and let me know what you think! Thanks!

const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const descInput = document.querySelector('input.description'); const descP = document.querySelector('p.description'); const descButton = document.querySelector('button.description'); const listUl = listDiv.querySelector('ul'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); const otherLis = document.querySelectorAll('li');

function attachListItemButtons(ul) {

for(var i=0; i<ul.length; i++){ let k = ul[i].querySelectorAll('button'); for(var j=0;j<k.length; j++){ ul[i].removeChild(ul[i].lastElementChild); } }

for (var i=0; i<ul.length; i++){ if (i == 0) { let down = document.createElement('button'); down.className = 'down'; down.textContent = 'Down'; down.style.background = '#508abc'; ul[i].appendChild(down);

let remove = document.createElement('button');
remove.className = 'removeItem';
remove.textContent = 'Remove';
remove.style.background = '#768da3';
ul[i].appendChild(remove);
}
else if (i == (ul.length - 1)) {      
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'Up';
  up.style.background = '#52bab3';
  ul[i].appendChild(up);

  let remove = document.createElement('button');
  remove.className = 'removeItem';
  remove.textContent = 'Remove';
  remove.style.background = '#768da3';
  ul[i].appendChild(remove);
}
else {
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'Up';
  up.style.background = '#52bab3';
  ul[i].appendChild(up);

  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'Down';
  down.style.background = '#508abc';
  ul[i].appendChild(down);

  let remove = document.createElement('button');
  remove.className = 'removeItem';
  remove.textContent = 'Remove';
  remove.style.background = '#768da3';
  ul[i].appendChild(remove);


}

} }

attachListItemButtons(otherLis);

listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON'){
if (event.target.className == 'removeItem'){
let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } if (event.target.className == 'up'){
let li2 = event.target.parentElement; let li3 = li2.previousElementSibling; let li = event.target.parentNode; let prevLi = li.previousElementSibling; let ul = li.parentNode; if (prevLi) { ul.insertBefore(li, prevLi); } let newLis = document.querySelectorAll('li'); attachListItemButtons(newLis); } if (event.target.className == 'down'){
let li2 = event.target.parentElement; let li3 = li2.nextElementSibling; let li = event.target.parentNode; let nextLi = li.nextElementSibling; let ul = li.parentNode; if (nextLi) { ul.insertBefore(nextLi, li); } let newLis = document.querySelectorAll('li'); attachListItemButtons(newLis); } } });

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

descButton.addEventListener('click', () => { descP.innerHTML = descInput.value + ':'; descInput.value = ''; });

addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild(li); addItemInput.value = ''; let newLis = document.querySelectorAll('li'); attachListItemButtons(newLis); });