Second edit. Completely deleted original as I've gotten somewhere digging into the meat of the documentation while waiting for response.

I'm working on adapting the endnote implementation at https://css4.pub/2015/usenix/example.html to meet my own needs, but, I've run into a problem (my javascript is apparently even more rusty than I thought).

I'm trying to have my endnotes get put at the end of the chapter they appear in, with each chapter in it's own <article>. This means I can't use hardcoded element ids (and, if I wanted to make this reusable without rewriting the script for each document, I'd want to avoid that as well), but, I'm also not entirely sure how to accomplish the moves into the correct container without hardcoded id's. Is there another example that maybe shows endnotes at chapter end, with multiple chapters that I can look at to have an idea how to go about this? Or, maybe a clue to where to look within general javascript references for how to do this?

Edited 22 Sep 2024 by nightshift

Assuming that each <article> element contains a suitable element to contain the references, you could do something like:

// For the sake of this example, we assume that the variable "ref"
// contains a reference element to be moved, and that each article
// has a references section of class "refsSection" to contain its 
// references.

let refsSection = ref.closest('article').querySelector('.refsSection');
refsSection.appendChild(ref);

Basically, rather than moving all of the refs to the same section, for each individual ref you go up the document tree to find the nearest <article>, then look inside that article for a references section, and move the ref there.

interesting. I'd still need to write the code to fill the "ref" variable to use this, correct? Right now, in my test document, I've just got a span class="ref" surrounding simple text, but eventually I'll be wanting to have image tags maybe with some text.

I've got a half working script based on the linked example (half working because it only works on the first article, never runs on the second at all, it also freaks out about adding a class to what is essentially a call, and I can't figure out what I've done wrong.)

Alright, I've tried that, and I'm getting error "TypeError: 'closest': undefined is not a function" so, apparently I'm not populating ref correctly.

Yay! I've mostly got what I was trying for (apparently my javascript is more rusty than I thought, so I was overthinking). All I really needed was a minor modification to the example script - remove the id as a selector for the container, for now it's set to look for an ol that is a child of a footer, but I could have set it to look for an ol with a specific class and to search for a specific class instead of cite tags - and wrap the whole thing in another loop that grabs the articles to run the original loop for each article (took way more time than it should have to catch on that I needed to use a different iterator variable on the new wrapper loop).

I'll post my test doc a little later. Next step on this is seeing if I can work out how to pass the desired container and class indicating the reference when the function is called, should be fairly simple if not doing error checking, if both are simple classes, more difficult if using combinators (maybe).