HTML5 writer: Add suffix to multiple footnote section ids

The first (and often only) `<aside id=footnotes>` block remains
unchanged, however any additional blocks from `--reference-location` are
distinguished as `#footnotes-2`, `#footnotes-3`, and so on.  No other
existing writer seems to implement per-section IDs, including HTML4.

4 files changed, 232 insertions, 4 deletions

diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index c7a4703ae..0ccb36559 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -87,6 +87,7 @@ import Data.String (fromString)
 data WriterState = WriterState
     { stNotes        :: [Html]  -- ^ List of notes
     , stEmittedNotes :: Int     -- ^ How many notes we've already pushed out to the HTML
+    , stEmittedNoteBlocks :: Int  -- ^ How many @\<div class=footnote>@ blocks we've already pushed out
     , stMath         :: Bool    -- ^ Math is used in document
     , stQuotes       :: Bool    -- ^ <q> tag is used
     , stHighlighting :: Bool    -- ^ Syntax highlighting is used
@@ -102,7 +103,11 @@ data WriterState = WriterState
     }
 
 defaultWriterState :: WriterState
-defaultWriterState = WriterState {stNotes= [], stEmittedNotes = 0, stMath = False, stQuotes = False,
+defaultWriterState = WriterState {stNotes= [],
+                                  stEmittedNotes = 0,
+                                  stEmittedNoteBlocks = 0,
+                                  stMath = False,
+                                  stQuotes = False,
                                   stHighlighting = False,
                                   stHtml5 = False,
                                   stEPUBVersion = Nothing,
@@ -530,6 +535,16 @@ footnoteSection opts refLocation startCounter notes = do
   let hrtag = if refLocation /= EndOfBlock
                  then (if html5 then H5.hr else H.hr) <> nl
                  else mempty
+  idName <- do
+    blockCount <- gets stEmittedNoteBlocks
+    modify $ \st -> st{ stEmittedNoteBlocks = blockCount + 1 }
+    return $
+      -- Keep the first note section's id undecorated to maintain a target for
+      -- old links which don't expect numbered sections, or for when the notes
+      -- are rendered all together at the end of the document.
+      if blockCount <= 0
+        then "footnotes"
+        else "footnotes-" <> show (blockCount + 1)
   let additionalClassName = case refLocation of
         EndOfBlock -> "footnotes-end-of-block"
         EndOfDocument -> "footnotes-end-of-document"
@@ -539,17 +554,17 @@ footnoteSection opts refLocation startCounter notes = do
   let container x
         | html5
         , epubVersion == Just EPUB3
-                = H5.section ! A.id "footnotes"
+                = H5.section ! A.id (fromString idName)
                              ! A.class_ className
                              ! customAttribute "epub:type" "footnotes" $ x
         | html5
         , refLocation == EndOfDocument
         -- Note: we need a section for a new slide in slide formats.
-                = H5.section ! A5.id "footnotes"
+                = H5.section ! A5.id (fromString idName)
                              ! A5.class_ className
                              ! A5.role "doc-endnotes"
                              $ x
-        | html5 = H5.aside   ! prefixedId opts "footnotes"
+        | html5 = H5.aside   ! prefixedId opts (fromString idName)
                              ! A5.class_ className
                              ! A5.role "doc-footnote"
                              $ x
diff --git a/test/command/8770-block.md b/test/command/8770-block.md
new file mode 100644
index 000000000..43762c97e
--- /dev/null
+++ b/test/command/8770-block.md
@@ -0,0 +1,75 @@
+```
+% pandoc -t html5 --reference-location=block
+# Section 1
+
+hello[^1]
+
+: Sample table.[^2]
+
+-----------
+ Fruit[^3]
+-----------
+ Bans[^4]
+-----------
+
+# Section 2
+
+dolly[^5]
+
+[^1]: doc footnote
+[^2]: caption footnote
+[^3]: header footnote
+[^4]: table cell footnote
+[^5]: doc footnote
+^D
+<h1 id="section-1">Section 1</h1>
+<p>hello<a href="#fn1" class="footnote-ref" id="fnref1"
+role="doc-noteref"><sup>1</sup></a></p>
+<aside id="footnotes" class="footnotes footnotes-end-of-block"
+role="doc-footnote">
+<ol>
+<li id="fn1"><p>doc footnote<a href="#fnref1" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+</ol>
+</aside>
+<table style="width:17%;">
+<caption>Sample table.<a href="#fn2" class="footnote-ref" id="fnref2"
+role="doc-noteref"><sup>2</sup></a></caption>
+<colgroup>
+<col style="width: 16%" />
+</colgroup>
+<thead>
+<tr class="header">
+<th style="text-align: center;">Fruit<a href="#fn3" class="footnote-ref"
+id="fnref3" role="doc-noteref"><sup>3</sup></a></th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td style="text-align: center;">Bans<a href="#fn4" class="footnote-ref"
+id="fnref4" role="doc-noteref"><sup>4</sup></a></td>
+</tr>
+</tbody>
+</table>
+<aside id="footnotes-2" class="footnotes footnotes-end-of-block"
+role="doc-footnote">
+<ol start="2">
+<li id="fn2"><p>caption footnote<a href="#fnref2" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn3"><p>header footnote<a href="#fnref3" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn4"><p>table cell footnote<a href="#fnref4"
+class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+</ol>
+</aside>
+<h1 id="section-2">Section 2</h1>
+<p>dolly<a href="#fn5" class="footnote-ref" id="fnref5"
+role="doc-noteref"><sup>5</sup></a></p>
+<aside id="footnotes-3" class="footnotes footnotes-end-of-block"
+role="doc-footnote">
+<ol start="5">
+<li id="fn5"><p>doc footnote<a href="#fnref5" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+</ol>
+</aside>
+```
diff --git a/test/command/8770-document.md b/test/command/8770-document.md
new file mode 100644
index 000000000..da19acd93
--- /dev/null
+++ b/test/command/8770-document.md
@@ -0,0 +1,66 @@
+```
+% pandoc -t html5 --reference-location=document
+# Section 1
+
+hello[^1]
+
+: Sample table.[^2]
+
+-----------
+ Fruit[^3]
+-----------
+ Bans[^4]
+-----------
+
+# Section 2
+
+dolly[^5]
+
+[^1]: doc footnote
+[^2]: caption footnote
+[^3]: header footnote
+[^4]: table cell footnote
+[^5]: doc footnote
+^D
+<h1 id="section-1">Section 1</h1>
+<p>hello<a href="#fn1" class="footnote-ref" id="fnref1"
+role="doc-noteref"><sup>1</sup></a></p>
+<table style="width:17%;">
+<caption>Sample table.<a href="#fn2" class="footnote-ref" id="fnref2"
+role="doc-noteref"><sup>2</sup></a></caption>
+<colgroup>
+<col style="width: 16%" />
+</colgroup>
+<thead>
+<tr class="header">
+<th style="text-align: center;">Fruit<a href="#fn3" class="footnote-ref"
+id="fnref3" role="doc-noteref"><sup>3</sup></a></th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td style="text-align: center;">Bans<a href="#fn4" class="footnote-ref"
+id="fnref4" role="doc-noteref"><sup>4</sup></a></td>
+</tr>
+</tbody>
+</table>
+<h1 id="section-2">Section 2</h1>
+<p>dolly<a href="#fn5" class="footnote-ref" id="fnref5"
+role="doc-noteref"><sup>5</sup></a></p>
+<section id="footnotes" class="footnotes footnotes-end-of-document"
+role="doc-endnotes">
+<hr />
+<ol>
+<li id="fn1"><p>doc footnote<a href="#fnref1" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn2"><p>caption footnote<a href="#fnref2" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn3"><p>header footnote<a href="#fnref3" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn4"><p>table cell footnote<a href="#fnref4"
+class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+<li id="fn5"><p>doc footnote<a href="#fnref5" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+</ol>
+</section>
+```
diff --git a/test/command/8770-section.md b/test/command/8770-section.md
new file mode 100644
index 000000000..07f063a2e
--- /dev/null
+++ b/test/command/8770-section.md
@@ -0,0 +1,72 @@
+```
+% pandoc -t html5 --reference-location=section
+# Section 1
+
+hello[^1]
+
+: Sample table.[^2]
+
+-----------
+ Fruit[^3]
+-----------
+ Bans[^4]
+-----------
+
+# Section 2
+
+dolly[^5]
+
+[^1]: doc footnote
+[^2]: caption footnote
+[^3]: header footnote
+[^4]: table cell footnote
+[^5]: doc footnote
+^D
+<h1 id="section-1">Section 1</h1>
+<p>hello<a href="#fn1" class="footnote-ref" id="fnref1"
+role="doc-noteref"><sup>1</sup></a></p>
+<table style="width:17%;">
+<caption>Sample table.<a href="#fn2" class="footnote-ref" id="fnref2"
+role="doc-noteref"><sup>2</sup></a></caption>
+<colgroup>
+<col style="width: 16%" />
+</colgroup>
+<thead>
+<tr class="header">
+<th style="text-align: center;">Fruit<a href="#fn3" class="footnote-ref"
+id="fnref3" role="doc-noteref"><sup>3</sup></a></th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td style="text-align: center;">Bans<a href="#fn4" class="footnote-ref"
+id="fnref4" role="doc-noteref"><sup>4</sup></a></td>
+</tr>
+</tbody>
+</table>
+<aside id="footnotes" class="footnotes footnotes-end-of-section"
+role="doc-footnote">
+<hr />
+<ol>
+<li id="fn1"><p>doc footnote<a href="#fnref1" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn2"><p>caption footnote<a href="#fnref2" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn3"><p>header footnote<a href="#fnref3" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+<li id="fn4"><p>table cell footnote<a href="#fnref4"
+class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+</ol>
+</aside>
+<h1 id="section-2">Section 2</h1>
+<p>dolly<a href="#fn5" class="footnote-ref" id="fnref5"
+role="doc-noteref"><sup>5</sup></a></p>
+<aside id="footnotes-2" class="footnotes footnotes-end-of-section"
+role="doc-footnote">
+<hr />
+<ol start="5">
+<li id="fn5"><p>doc footnote<a href="#fnref5" class="footnote-back"
+role="doc-backlink">↩︎</a></p></li>
+</ol>
+</aside>
+```