I have a React program that generates HTML tables and I need to make a button that can convert all of these into a PDF document with each table on a different page. I tried using js-pdf, however, there is a bug where the html function won't execute when running it multiple times. I tried making multiple documents with one table on one page and merging them with pdf-lib.

async function mergePDF(pdfs) {
  var doc = await PDFDocument.load(pdfs[0]);

  for (let index = 1; index < pdfs.length; index++) {
    const element = await PDFDocument.load(pdfs[index]);
    const copiedPages = await doc.copyPages(element, element.getPageIndices());
    copiedPages.forEach((page) => doc.addPage(page))
  }
  return doc;
}
async function DownloadPDF() {
  // Generates the PDF
  var margin = 10;
  // Gets the tables
  var months = document.getElementsByClassName("month");
  var docs = [];
  for (let index = 0; index < months.length; index++) {
    var doc = new jsPDF("l", "px", [months[index].clientWidth + margin * 2, months[index].clientHeight + margin * 2.3]);
    await doc.html(months[index], { x: 0, y: 0, margin: margin });
    docs.push(doc.output("arraybuffer"));
  }
  var mergedPDF = await mergePDF(docs);
}

This approach sort of works, the only problem is that it's slow, it doesn't seem to generate the first table and it seems way to inefficient. Is there a better solution to this?