Issues with Batch printing function

Hello.
I am currently trying to write some JS that uses a IFrame that looks into URLs based on the IDs from a table in a knack database. Having issues with 2 parts of it.
The IFrame mostly works but when it prints, it prints the age when it is loading and I cant get it to only print when it has finished loading.

My other issue that I am having is that my button linked to the printButton() function to start the process doesn’t work. I have done all of initial testing when the JS is linked to the page render.:

$(document).on('knack-scene-render.scene_461', function(event, scene) {
  function printButton() {
  var rowCount = $("tr").length;
  var ids = $('tr').map(function(){
      return this.id
  }).get();
  for (let i=1;i<rowCount-1;i++){
    loadOtherPages(ids[i])
  }
  }


  function loadOtherPages(i) {
     $("<iframe>")   
     .attr("id", "frame_"+i)                         
         // .hide()                          
          .attr("src", "https://somecompany#view-and-manage-orders/to-invoice/view-invoice/"+i+"/print-invoice2/"+i) 
          .appendTo("body")
          .on('load', function(){      
    var newDoc = document.getElementById("frame_"+i);
    $(newDoc).load(function(){
      console.log("pass");
      newDoc.contentWindow.print();
    });
    });
  }

  $("<a>")
  .on("click", "printButton()")
  .appendTo("table")
  .text("Print All");


});