Add list items, change header text, change list item [JS]

            let header = document.getElementById("the-header");
            let button = document.getElementById("the-button");
            //let list = document.getElementById("the-list");
            let list = document.querySelector("#the-list");
            //let listItems = document.getElementById("the-list").getElementsByTagName("li");
            let listItems = document.querySelectorAll("#the-list li");
            let listLength = listItems.length;
            let newItemCount = listLength+1;

            function selectItem(e) {
                if (e.target.nodeName == "LI") {
                    header.innerHTML = e.target.innerHTML;
                    for (i=0 ;i < e.target.parentNode.children.length; i++)  {
                        e.target.parentNode.children[i].classList.remove("active");
                    }
                    e.target.classList.add("active");
                }
            }

            function addListItem() {
                list.innerHTML += "<li>Item " + newItemCount + "</li>";
                newItemCount++;
            }

            // for (i=0 ;i < listLength; i++)  {
            //     listItems[i].addEventListener("click", selectItem)
            // }
            list.addEventListener("click", selectItem);
            button.addEventListener("click", addListItem);