Are eventlisteners affected by loops?

I am trying to add an eventlistener in one file where i have all my javascript code to get information from another file (an x-component), but i can't get my eventlistener to work? This is my eventlistener:

document.getElementById('minut_box_selector').addEventListener('change', updateTimeDisplay);

function updateTimeDisplay() {
    let hoursInput = document.getElementById('hours');
    let minutsSelect = document.getElementById('minut_box_selector');
    let hours = hoursInput.value;
    let minuts = minutsSelect.value;
    console.log(hoursInput); <!-- Not showing anything -->
    console.log(minutsSelect); <!-- Not showing anything -->
    let endTime = `${hours}:${minuts}`;
    document.getElementById('output').textContent = `End time: ${endTime}`;
}

And these are my element where i try to get the data from:

            <div class="border-2 border-black flex justify-center content-start">
                <label for="">
                    <input type="text" id="hours" class="end_value_select w-28 text-center" placeholder="Select Time"         <!-- ID = HOURS -->
                           maxlength="2"
                           minlength="1">
                </label>
                <label for="minuts">
                        <select class="border-l-2 border-black" id="minut_box_selector" >          <!-- ID = MINUT_BOX_SELECTOR -->
                        <option value="0" >0</option>
                        <option value="15" >15</option>
                        <option value="30">30</option>
                        <option value="45">45</option>
                    </select>
                </label>
            </div>

I am worried about, that since my x-component is created in a for each look like this:

  @foreach($weekday->hours as $hour)
		//Some code
        @unless($bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)))
             <x-popupform class="openClose" :user="$user" :hour="$hour"></x-popupform>
        @endunless
   @endforeach
										

That something weird might be happening that makes my event listeners invalid or something like that?

NOTE: I have tried to use classes instead (I know that ID's are unique, is obviously this is in a loop),

Example:

function updateTimeDisplay() {
    let hoursInput = document.querySelectorAll("input.hours")
    let minutsSelect = document.querySelectorAll("select.minuts")
    let hours = hoursInput.value;
    let minuts = minutsSelect.value;
    console.log(hoursInput); <!-- Not showing anything -->
    console.log(minutsSelect); <!-- Not showing anything -->
    let endTime = `${hours}:${minuts}`;
    document.getElementById('output').textContent = `End time: ${endTime}`;
}

but that made no difference.