creating a new list for each index from the array

You need to put everything inside the loop like this :

function filler(list, arr) {

  for (let i = 0; i < arr.length; i++) {
    let b = document.createElement("li");
    b.appendChild(document.createTextNode(arr[i]));
    list.appendChild(b);
  }

}


let ul = document.getElementById("fillthislist");
let entries = ["Shmi", "Anakin", "Luke"];

filler(ul, entries);

<section>
  <h1>Fill an empty list with the contents of an array</h1>
  <ul id=fillthislist>
  </ul>
</section>

For better performance don't appendChild to the document element. Use a Document Fragment instead.

function filler(list, listItems) {

  var fragment = document.createDocumentFragment();

  listItems.forEach(item => {
    let li = document.createElement('li');
    li.appendChild(document.createTextNode(item));
    fragment.appendChild(li);
  });

  list.appendChild(fragment);
}

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

JsFiddle example:
https://jsfiddle.net/c96hv9tj/11/