I am trying to time how long the users stay on each question and how long they spend typing, and have the timers show up on the screen. The question format is more or less the same for each question, so I'm using/recycling the exact same js for each question as well.
The first page works great. Unfortunately, things get really messed up when I move onto the second page. The timers don't function at all, but there are no errors logged onto the console, and I'm not sure what's wrong. Also, apparently, the two timers I had on the first page also carry on to the second page, although they're glitchy or not working at all.
What can I do to make sure that each page just has two appropriate and working timers (time and time for input)? I've tried to search up similar questions, which often tend to mention clearing the interval as solutions, but I'm already doing that. Any help would be greatly appreciated!

My js (I'm afraid it's rather long):
Qualtrics.SurveyEngine.addOnload(function(){
    
    var headerc = document.createElement("div");
    headerc.className = "header-cont"; 
    headerc.id = "header_container";
        
    var header = document.createElement("div");
    header.className = "header";
    header.id = "header_1";


    var timer = document.createElement("div"); 
    timer.className = "timer";
    timer.id = "timer_1";
    timer.innerHTML = "time: :";

    var headerc2 = document.createElement("div");
    headerc2.className = "header-cont2"; 
    headerc2.id = "header_container2";
        
    var header2 = document.createElement("div");
    header2.className = "header2";
    header2.id = "header_2";


    var timer2 = document.createElement("div"); 
    timer2.className = "timer2";
    timer2.id = "timer_2";
    timer2.innerHTML = "time for input: :";

    headerc2.appendChild(header2);
    header2.appendChild(timer2);
document.body.insertBefore(header2, document.body.firstChild);

    headerc.appendChild(header);
    header.appendChild(timer);
    document.body.insertBefore(header, document.body.firstChild);

document.getElementById("seconds").innerHTML="00";
document.getElementById("seconds2").innerHTML="00";
document.getElementById("minutes").innerHTML="00";
document.getElementById("minutes2").innerHTML="00";
    
    // timepassed is the measure of how long a respondant stays on the given page
    var timepassed = 0;
    var myTimer;
var puretypingtime = 0;


function pad (val) { 
return val > 9 ? val : "0" + val; 
}

myTimer = setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++timepassed%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(timepassed/60,10));
    }, 1000);

var timestart;
var timebetween;
var timeend;
var keyCode;
document.onkeydown = (function (event) {
console.log("keydown: " + puretypingtime);
if (keyCode !== event.keyCode) { 
timestart = Date.now();
keyCode = event.keyCode;
}
});


document.onkeyup = (function (event) {
timeend = Date.now();
timebetween = timeend - timestart;
puretypingtime += timebetween;
keyCode = null;
console.log("keyup: " + puretypingtime + " (took: "+timebetween+")");
});


var inputTimer; 
var inputTimePassed = 0;
var keypressedyet = false;

document.addEventListener('keydown', function(event) {
if (!keypressedyet) {
keypressedyet = true; 
inputTimer = setInterval( function(){
document.getElementById("seconds2").innerHTML=pad(++inputTimePassed%60);
document.getElementById("minutes2").innerHTML=pad(parseInt(inputTimePassed/60,10));
}, 1000);
}
});


    $('NextButton').onclick = function (event) {
        //stop myTimer for timepassed
        clearInterval(myTimer); 
        //timepassed variable at this point should contain how long the respondant has spent on this page.
clearInterval(inputTimer);
    };
});