How to add automatic page numeration in Google App Scripts html when a table spans over several pages

I have an html in Google App Scripts that contains a table that might span over several pages, and I want to add something like “Page 3/4” at the bottom right of each page.

In my App Script I create a template from the html like this:
const template = HtmlService.createTemplateFromFile('my-html-file-name');

and then I get the pdf like this:

const htmlOutput = template.evaluate().getContent();
const pdfBlob = Utilities.newBlob(htmlOutput, 'text/html').getAs('application/pdf');
pdfBlob.setName(`file-name.pdf`);
const pdfBytes = pdfBlob.getBytes();
const pdfBase64 = Utilities.base64Encode(pdfBytes);

Note that the page numeration should indicate the current page and the total number of pages “Page 1/4”.

I’ve tried setting the styles on the html like this:

    @page {
      size: A4;
      margin: 0;
    }

    .page-footer {
      position: fixed;
      bottom: 0;
      right: 0;
      margin: 10px;
      font-size: 10px;
    }

    .page-footer::after {
      counter-increment: page;
      content: counter(page);
    }
    
    .....

    <div class="page-footer"></div> </body>

and I’ve also tried this approach using a script:

<script>
    document.addEventListener('DOMContentLoaded', function() {
      const totalPages = Math.ceil(document.body.scrollHeight / window.innerHeight);
      const pageNumbers = document.querySelectorAll('.page-footer');
      pageNumbers.forEach((pageNumber, index) => {
        pageNumber.textContent = `${index + 1}/${totalPages + 1}`;
      });
    });
</script>

Note here that the totalPages get calculated correctly but there is only one element in the pageNumbers array, since there is only one div with that class, but yet it is shown in all the pages due to the “fixed” position.