So after writing my previous reply I realized that I created my heading links using only the text in the heading rather than a custom id as you had suggested. So I corrected the footnotes heading so that it now looks like this:
* Footnotes
:PROPERTIES:
:COLUMNS: %CUSTOM_ID[(Custom Id)]
:CUSTOM_ID: footnoteid
:END:
I then updated the footnote link higher up in my post like this:
see [[#footnoteid][footnote]]: grep [fn:1]
Unexpectedly the footnote header is now being rendered like this:
Footnotes
As you can see it has an id of footnotes and not footnoteid, so already I have a problem. The footnote link is rendered like this:
<p>see <a href="#footnoteid" title="footnote">footnote</a>: grep <sup class="footnote-ref" id="fnref:1"><a href="#fn:1">1</a></sup></p>
This is much better. Now, both the header link and the footnote link have a leading octothorpe and are being treated as proper anchors. Clicking on them still navigates the browser to the webroot though. Also, the footnoteid does not match the actual id being rendered for the heading. I can of course change that, I am just not sure why it is not respecting the customid that I choose when setting the CUSTOM_ID property. At least I am one small step closer to a solution.