How to print in 2 html using one javascript

Hello I have 2 html files and now I am printing everythinng in 1 of the htmls. When I click a button I want to print everything on the 2nd HTML. Here are the codes

questionaire: 1st html questionaire1: 2nd html

HTML1:

<head>
  <title>Your Survey Form</title>
  <link rel="stylesheet" href="DemoSurveyStyle.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="alternate stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
</head>

<body>
  <ol id="menu">
    <li> <a href="DemoSurvey.html">Home</a> </li>
    <li> <a href="new.html">CreateSurvey</a> </li>
  </ol>
  <h1 id="myText" contenteditable="true">Survey Name</h1>
  <div id="buttons">
  <button type="button" id="addSectionButton">Add Section</button>
  </div>
  
  <!-- <button type="button" id="copyButton">Duplicate Survey</button> -->
  <button type="button" id="clearButton">Clear Survey</button>
  <button type="button" id="testButton">Test</button>

  <p id="testingBox">testingBox</p> <p id="testingBox1">testingBox1</p>
  <p id="testingBox2">testingBox2</p> <p id="testingBox3">testingBox3</p>
  <p id="testingBox4">testingBox4</p>
  <p id="testingBox5">testingBox5</p> <p id="testingBox6">testingBox6</p>
  <p id="testingBox7">testingBox7</p>
  <form>
    <div id="questionaire"></div>
  </form>

  <p class="counters" id="numberOfOptionsQuestions"></p>
  <p class="counters" id="numberOfShAnQuestions"></p>
  <p class="counters" id="numberOfLoAnQuestions"></p>
  <p class="counters" id="numberOfNumQuestions"></p>
  <p class="counters" id="numberOfStarQuestions"></p>
  <p class="counters" id="testingText"></p>

  <script src="DemoCode.js"></script>
</body>

</html>

HTML2:

<html>

<head>
  <title>Your Survey Form</title>
  <link rel="stylesheet" href="DemoSurveyStyle.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="alternate stylesheet">
</head>

<body>

    <ol id="menu">
        <li> <a href="DemoSurvey.html">Home</a> </li>
        <li> <a href="new.html">CreateSurvey</a> </li>
    </ol>
    <button type="button" id="copyButton">Duplicate Survey</button>
    <p id="testingBox10">testingBox10</p>
  <form>
    <div id="questionaire1"></div>
  </form>
  
  <script src="DemoCode.js"></script>
</body>

</html>

And the part of Javascript that prints:

    for (let i = 0; i < allSectionsArray.length; i++) {
        newSection(true, allSectionsArray[i][0]);
        for (let j = 0; j < allSectionsArray[i][3].length; j++) {
            switch (allSectionsArray[i][3][j][1]) {
                case 0:
                    newOption(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 1:
                    newShAnSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 2:
                    newLoAnSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 3:
                    newNumSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 4:
                    newStarSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
            }
        }
    }
}

I want to print everything on questionaire1 but simply changing to questionaire1 in javascript when I print doesn't seem to work