Issues with Batch printing function

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(){
  for (let i=1;i<rowCount-1;i++){

  function loadOtherPages(i) {
     .attr("id", "frame_"+i)                         
         // .hide()                          
          .attr("src", "https://somecompany#view-and-manage-orders/to-invoice/view-invoice/"+i+"/print-invoice2/"+i) 
          .on('load', function(){      
    var newDoc = document.getElementById("frame_"+i);

  .on("click", "printButton()")
  .text("Print All");