How to insert content on top of each PDFObject div?

I'm presenting some PDFs in a horizontal design with the following code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 100%;
            height: 800px;
            /*overflow: auto;*/
            /*overflow-y: hidden;*/
            margin: 5 auto;
            white-space: nowrap
        }

        .pdfobject-container {
            /*width: 100%;*/
            max-width: 800px;
            height: 800px;
            margin: 5em 0;
            display: inline;
        }
        .pdfobject { border: solid 1px #666; max-width: 40%;}
    </style>
</head>
<body>

    <div id='scrolly'>
        <div id="pdf1" ></div>
        <div id="pdf2" ></div>
        <div id="pdf3" ></div>
    </div>

<script src="PDFObject-master/pdfobject.js"></script>
<script>

PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>

</body>
</html>

I would like to put some text on top of each PDF div, like a brief description about the PDF document. How might I do that?

Solution

Snippet

 // each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf 
for (var x = 0; x < all_pdf.length; ++x) {
  all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Something</title>
  <style type="text/css">
    #scrolly {
      width: 100%;
      height: 800px;
      /*overflow: auto;*/
      /*overflow-y: hidden;*/
      margin: 5 auto;
      white-space: nowrap
    }
    .pdfobject-container {
      /*width: 100%;*/
      max-width: 800px;
      height: 800px;
      margin: 5em 0;
      display: inline;
    }
    .pdfobject {
      border: solid 1px #666;
      max-width: 40%;
    }
  </style>
</head>

<body>

  <div id='scrolly'>
    <div id="pdf1">PDF details1</div>
    <div id="pdf2">PDF details2</div>
    <div id="pdf3">PDF details3</div>
  </div>

  <script src="PDFObject-master/pdfobject.js"></script>
  <script