I have a piece of code that is working....it allows me to display multiple files in a list when a user clicks on Choose File. The code works fine. However, I am trying to figure out if it's possible to append to the list instead of creating a new one each time. I've researched this most of the afternoon and a vast majority of the articles say it's not easily done. Should I be using a FormData approach instead? Would that buy me anything?

Here is my Javascript code...It works fine...

    window.onload = function() {
      const inputElement = document.getElementById("my_files");
      const fileNames = document.getElementById("file_names");
      let fileList = [];
    
      function removeFile(event) {
        event.preventDefault();
    
        let filename = this.dataset.filename;
        let modifiedFileList = new DataTransfer();
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].name !== filename) {
            modifiedFileList.items.add(fileList[i]);
          }
        }
    
        inputElement.files = modifiedFileList.files;
        fileList = inputElement.files;
        handleFiles(fileList);
        return false;
      }
    
      inputElement.addEventListener("change", handleFilesListener, false);
      function handleFilesListener() {
        fileList = this.files;
        handleFiles(fileList);
      }
    
      function handleFiles(fileList) {
        fileNames.textContent = '';
        for (let i = 0; i < fileList.length; i++) {
          let listElement = document.createElement("li");
          let textNode = document.createTextNode(fileList[i].name);
    
          listElement.appendChild(textNode);
          listElement.setAttribute("class","attachmentname");
    
          let removeButton = document.createElement("button");
    
          removeButton.innerHTML = "Remove&nbsp";
          removeButton.setAttribute('type', 'button')
          removeButton.setAttribute("class", "button121");
          removeButton.setAttribute('data-filename', fileList[i].name)
          removeButton.addEventListener('click', removeFile)
          listElement.appendChild(removeButton);
          fileNames.appendChild(listElement);
        }
      }
    }

Again, I'm trying to figure out if I can append to this list instead of constantly looping through it if the list changes. I did try to do an append instead of add below...but that didn't work. I'm a self proclaimed newb...so please go easy on me. :).

let filename = this.dataset.filename;
            let modifiedFileList = new DataTransfer();
            for (let i = 0; i < fileList.length; i++) {
              if (fileList[i].name !== filename) {
                modifiedFileList.items.add(fileList[i]);
              }
            }

Thanks in advance for any pointers.