title: Appending a single string in an array to a list item (li) using file upload?
body: <p>I am trying to upload 10 files at once and create a unordered list of the names of all of those file. It works fine until i try to upload more than one file. </p>
  
  <p>The issue: I am currently getting back all strings of an array under 1 <code>li</code> but I wish to print out each of the file uploads in their own li, because as you will see in my code, I am also appending a checkbox, which would mean each file needs their own li. I dont understand why it is not printing each file to its own li. My guess would be that it takes in 1 file "upload" input (that can and may hold more than 1 file ) and acts like it is a single upload ( despite more than 1 file being uploaded ).</p>
  
  <p>Here is my code.</p>
  
  <pre><code>        var fileList = [];
          for (var i = 0; i &lt; e.target.files.length; i++) {
            fileList.push(e.target.files[i].name);
          }
  
          const formatedArray = fileList.map(x =&gt; {
            return x.replace(".pdf", "");
          });
  
          console.log(fileList);
          console.log(formatedArray);
  
          ul = document.createElement("ul");
  
          document.getElementById("uList").appendChild(ul);
  
          formatedArray.forEach(function(item) {
            let li = document.createElement("li");
            ul.appendChild(li);
  
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.value = 1;
            checkbox.name = "todo[]";
  
            li.appendChild(checkbox);
  
            li.innerHTML += formatedArray;
          });
        };
  
  Thanks in advance.
  </code></pre>