I want to create multiple unordered lists underneath a div to display a multidimensional array I previously created.

I have this currently:

```
let divElementGroups = document.createElement("div"),
numberOfulListItems = groups.length,
ulListItemGroups = document.createElement("ul"),
listItemGroups = document.createElement("li"),
elementTitleGroups = document.createElement("span");
document.getElementById("teamsList").appendChild(divElementGroups);
for (var i = 0; i < numberOfulListItems; i++) {
  divElementGroups.appendChild(ulListItemGroups);
  ulListItemGroups.appendChild(elementTitleGroups);
  elementTitleGroups.textContent = "Groep" + i;
  for (var j = 0; j < groups[i].length; j++) {
    listItemGroups.innerHTML = ArrayClass[i][j];
    ulListItemGroups.appendChild(listItemGroups);
  }
}

```

As far as I know, the first for loop should create all the unordered lists and the 2nd one should put all the listitems in these unordered lists. So theoretically, it should create the unordered list and then put a span with "group 1" at the top, followed with all the items in that part of the array.

Here's an example array:

```
var groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

```

When running the code with this, the output it gives:

```
<div>
  <ul>
    <span>Groep1</span>
    <li>undefined</li>
  </ul>
</div>

```

While it should give this output:

```
<div>
  <ul>
    <span>Group 1</span>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul>
    <span>Group 2</span>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul>
    <span>Group 3</span>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

```