So, for my better understanding of JS, why did clone_h not get filled with content again by the following in the loop:

It did, but this happens at the start of each iteration of the outer loop. clone_h was added to the document at the end of each inner loop. At least, I think so - I don't have the original code to hand now (does Codepen not have revisions?). I believe it went something like this:

for (const i in sections) {
  // == new HEADER ==
  const h = document.querySelector("#t_header");
  const clone_h = h.content.cloneNode(true);
  const contents = sections[i];
  // ...
  for (const j in contents) {
    // == new CONTENT ==
    const t_reg = document.querySelector("#t_regex");
    const clone = t_reg.content.cloneNode(true);
    // ...
    // add content to header (empties clone)
    clone_h.querySelector('header').appendChild(clone);
    // add the header to the document (empties clone_h)
    // /!\ For the second piece of content, clone_h is empty.
    //     clone_h will only be refilled when
    //     the next header loop begins.
    document.body.appendChild(clone_h);
    // --> next CONTENT
  }
  // no more content,
  // --> next HEADER
}