I am trying to convert my html page to pdf using jsPDF. Essentially i am using the html method of jsPDF, giving it a source, and options and then in the callback function i would save the document. But i am having a problem when it comes to dividing the single html document into mulitple divs and saving each div in a page. I am trying the below code and it renders all the pages blank.

My html looks like

<div class = "resultpage" >
  <div class = "print-section-1">
     //some content
  </div>
  <div class = "print-section-2">
     //some content again
  </div>
  <div class = "print-section-3">
     //content...
  </div>
</div>

My js looks like :

window.jsPDF = window.jspdf.jsPDF;
let doc = new jsPDF({
                    orientation : "portrait",
                    unit : 'px',
                    format : 'a4',
                    hotfixes : ["px_scaling"],
                    putOnlyUsedFonts : true
                })
 doc.html($(".prints-section-1")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
  })
 doc.addPage()
doc.html($(".print-section-2")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.addPage()
doc.html($(".print-section-3")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.save("test")

This renders all the pages empty.

If i modify the js, to have a chaining of callbacks like below, i am able to get the last div (print-side-2 in this case) printed but the pages previous to it are blank.

doc.html($(".print-section-1")[0], {
            callback : function(doc) {
              doc.addPage();
              doc.html($(".print-section-2")[0], {
                 callback : function(doc) {
                    doc.save("test.pdf")
                  }
                 x: 10,
                 y : 10,
                margin : [50, 200, 50, 200],
                autoPaging : "text"
              })
            }
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })

Can anyone point out what i am doing wrong ? I searched for solutions but many use deprecated methods like addFromHTtml, and some suggested using line breaks like "<!--ADD_PAGE>" _ and style = "page-break-before : always" but both don't work. I looked into the documentation and it hasn't been great support. Please help me.