We could use CSS counters to make this whole thing much easier.

For example, if you have 3 existing references to footnotes in a document, and you want to add another one, but on a piece of content that occurs before all the others, you have to re-number them all. If you happen to work on the same document often, changing the order of sections, adding references along the way, it might be tedious to have to re-number all existing footnotes. The problem with footnotes on the web is that they can be a pain to maintain. Usually, footnotes are represented with a number according to the position of the footnote in the document, then the same numbers are present at the bottom of the document, adding extra content. You often see them in papers when the author wants to add a piece of information or cite a reference without doing it in the middle of the content or using parentheses. They cite references or comment on a designated part of the text above it. According to Plagiarism which has a surprisingly long entry on the matter, footnotes are:

I was playing with CSS counters the other day and thought about using them to deal with footnotes.

Footnote