TypeError: container.apppendChild is not a function. (In 'container.apppendChild(checkbox)', 'container.apppendChild' is undefined)

So I am trying to generate a bunch of Input fields And Labels depending on a set of values I get from my backend. Said backend works fine but I am having an issue appending the new child elements to my frontend. I keep getting this error:

TypeError: container.apppendChild is not a function. (In 'container.apppendChild(checkbox)', 'container.apppendChild' is undefined)

Here is my code:

<script>
  function scanLibraries() {
    var container = document.getElementById("libraries");
    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }
    const response = fetch("/api/scan", {
        method: "POST"
      }).then((response) => response.json())
      .then(function (data) {
        for (var i = 0; i < data.length; i++) {
          console.log(data[I])
          var container = document.getElementById("libraries"); //For Good measure?
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.name = "plex_library_" + i;
          checkbox.className =
            "w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600";
          var label = document.createElement("label");
          label.for = "plex_library_" + i;
          label.className = "ml-2 text-sm text-gray-600 dark:text-gray-400";
          label.innerHTML = data[i];
          container.apppendChild(checkbox);
          container.appendChild(label);
        }
      })
      .catch(error => console.log('error', error));
  }
</script>