I am trying to replicate a UI interaction found in Apple’s iTunes software: album covers are shown in a grid as selectable squares, clicking on one of which reveals a full-width tracklist box under the currently selected album. Here is a screenshot that demonstrates that UI.

I have a the main HTML/CSS/JS setup needed in the snippet below: a parent grid, some clickable items (albums), and a full-width item (tracklist) at the very bottom. However, the dynamic placement of the tracklist is missing.

This is the needed behaviour: whenever an album is clicked, the tracklist should be placed after the last album in the row that was clicked. This would effectively show the tracklist right under whatever album is clicked.

Is there a reliable way to do this?

Note: placing the tracklist at “index = clicked album index + 1″ isn’t the correct result, as the tracklist pushes the remaining albums in that row out.

const parent = document.getElementById("grid-parent");

for (let i = 0; i < 10; i++) {
  const album = document.createElement("button");
  album.classList.add("album");
  parent.appendChild(album);
  album.addEventListener("click", (event) => {
    /* Move the tracklist div element after 
     * the last element of the row that the 
     * clicked album element is in. 
     * How can we do that? */
  });
}

const tracklist = document.createElement("div");
tracklist.classList.add("tracklist");
parent.appendChild(tracklist);

#grid-parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10rem);
  grid-gap: 1rem;
  justify-content: space-between;
}

.album {
  width: 10rem;
  height: 10rem;
  background-color: aqua;
}

.tracklist {
  grid-column: 1 / -1;
  background-color: darkseagreen;
  height: 15rem;
}

<div id="grid-parent"/>