Unable to Record Response from Time Picker

I am trying to add a time picker to a question and save the time that participants selected. We originally had this code that worked:

Qualtrics.SurveyEngine.addOnload(function() {
    var thisQ = this;
    var qid = this.questionId;
    
    var container = document.createElement('div');
    container.style.marginBottom = '20px';
    
    var questionText = document.createElement('div');
    questionText.innerHTML = 'During the past month, what time have you usually gone to bed at night?';
    questionText.style.marginBottom = '10px';
    questionText.style.fontSize = '24px';
    
    var qualtricsInput = document.createElement('input');
    qualtricsInput.type = 'text';
    qualtricsInput.id = 'QR~' + qid;
    qualtricsInput.name = 'QR~' + qid;
    qualtricsInput.autocomplete = 'off';
    qualtricsInput.style.display = 'none';
    
    var timeContainer = document.createElement('div');
    timeContainer.style.display = 'flex';
    timeContainer.style.alignItems = 'center';
    timeContainer.style.gap = '10px';
    
    var hourSelect = document.createElement('select');
    hourSelect.style.padding = '5px';
    hourSelect.style.fontSize = '14px';
    
    for (var i = 1; i <= 12; i++) {
        var option = document.createElement('option');
        option.value = i;
        option.text = i < 10 ? '0' + i : i;
        hourSelect.appendChild(option);
    }
    
    var minuteSelect = document.createElement('select');
    minuteSelect.style.padding = '5px';
    minuteSelect.style.fontSize = '14px';
    
    for (var i = 0; i < 60; i++) {
        var option = document.createElement('option');
        option.value = i;
        option.text = i < 10 ? '0' + i : i;
        minuteSelect.appendChild(option);
    }
    
    var ampmSelect = document.createElement('select');
    ampmSelect.style.padding = '5px';
    ampmSelect.style.fontSize = '14px';
    
    var amOption = document.createElement('option');
    amOption.value = 'AM';
    amOption.text = 'AM';
    var pmOption = document.createElement('option');
    pmOption.value = 'PM';
    pmOption.text = 'PM';
    
    ampmSelect.appendChild(amOption);
    ampmSelect.appendChild(pmOption);
    
    var separator = document.createElement('span');
    separator.textContent = ':';
    separator.style.fontSize = '14px';
    separator.style.fontWeight = 'bold';
    
    timeContainer.appendChild(hourSelect);
    timeContainer.appendChild(separator);
    timeContainer.appendChild(minuteSelect);
    timeContainer.appendChild(ampmSelect);
    
    container.appendChild(questionText);
    container.appendChild(timeContainer);
    container.appendChild(qualtricsInput);
    
    var originalInput = document.getElementById(qid);
    originalInput.parentNode.replaceChild(container, originalInput);
    
    function updateTime() {
        var hours = parseInt(hourSelect.value);
        var minutes = parseInt(minuteSelect.value);
        var ampm = ampmSelect.value;
        
        if (ampm === 'PM' && hours < 12) hours += 12;
        if (ampm === 'AM' && hours === 12) hours = 0;
        
        var timeString = 
            (hours < 10 ? '0' + hours : hours) + ':' +
            (minutes < 10 ? '0' + minutes : minutes);
        
        qualtricsInput.value = timeString;
        
        Qualtrics.SurveyEngine.setEmbeddedData('Q1', timeString);
        
        var event = new Event('change');
        qualtricsInput.dispatchEvent(event);
    }
    
    hourSelect.addEventListener('change', updateTime);
    minuteSelect.addEventListener('change', updateTime);
    ampmSelect.addEventListener('change', updateTime);
    
    hourSelect.value = 9;
    minuteSelect.value = 0;
    ampmSelect.value = 'AM';
    updateTime();
});

However, when we switched to the Qualtrics New Survey Taking Experience theme (that we need to use), nothing shows up anymore. In finding a solution, we sought out a new code in Q76. This code successfully displayed the time picker (which we honestly prefer than the one in Q2), but this one somehow does not save the response from the time picker at all:

Qualtrics.SurveyEngine.addOnload(function() {
    var container = this.getQuestionContainer();

    // Add a clock picker input
    var clockInput = document.createElement('input');
    clockInput.type = 'time'; // HTML5 time picker
    clockInput.style.fontSize = '18px';
    clockInput.style.marginTop = '0px';
    clockInput.style.marginLeft = '23px';  
    clockInput.style.padding = '5px';      
    clockInput.style.display = 'inline-block';  
    clockInput.style.borderRadius = '5px'; 
    clockInput.style.border = '1px solid #333';

    // Append the clock input to the question container
    container.appendChild(clockInput);

    // Add an event listener for when the user changes the time
    clockInput.addEventListener('change', function() {
        var selectedTime = clockInput.value; 
        // Save the time string to Qualtrics embedded data
        Qualtrics.SurveyEngine.setEmbeddedData('BedTime', selectedTime);
    });
});

To add more details, I made sure that I created the embedded data field ‘BedTime’, and it was set at the very beginning of the survey. I see this column on the data sheet, but no response is being saved. The format of the data is currently hh:mm in 24 hour format, which is what we need. 

If someone can provide any insights, that would be immensely helpful! Thank you very much for your time and help!!