Why is the countdown no longer moving?

I'm currently building a site for my boyfriend. I copied code for a countdown and was working previously, however, I decided to re-make the site and the code is no longer working. What do I do!

Here is the JS.

window.addEventListener('load', (event) => {
console.log('The page has fully loaded');
countUpFromTime("July 9, 2021 12:00:00", 'countup1');
});
function countUpFromTime(countFrom, id) {
countFrom = new Date(countFrom).getTime();
var now = new Date(),
countFrom = new Date(countFrom),
timeDifference = (now - countFrom);
var secondsInADay = 60 * 60 * 1000 * 24,
secondsInAHour = 60 * 60 * 1000;
days = Math.floor(timeDifference / (secondsInADay) * 1);
hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
var idEl = document.getElementById(id);
idEl.getElementsByClassName('days')[0].innerHTML = days;
idEl.getElementsByClassName('hours')[0].innerHTML = hours;
idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
idEl.getElementsByClassName('seconds')[0].innerHTML = secs;
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
};

Here is the HTML.

<script type="text/javascript" src="time.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="styles2.css" rel="stylesheet">
<link href="transitions.css" rel="stylesheet">
<link href="fade.css" rel="stylesheet">
<meta http-equiv="refresh" content="35; url = gallery.html" />
<div class="h-100 d-flex align-items-center justify-content-center">
<div>
<h3 id="one">So... How long has it been?</h3>
<br>
<h3 id="two"><b>Let's see!</b></h2>
<br><br>
<h3>
<div id="three" class="countup" id="countup1">
<span class="sep">
<span class="timeel days">00</span>
<br>
<span class="timeel timeRefDays">days</span>
</span>
<span class="sep">
<span class="timeel hours">00</span>
<br>
<span class="timeel timeRefHours">hours</span>
</span>
<span class="sep">
<span class="timeel minutes">00</span>
<br>
<span class="timeel timeRefMinutes">minutes</span>
</span>
<span class="sep">
<span class="timeel seconds">00</span>
<br>
<span class="timeel timeRefSeconds">seconds</span>
</span>
</div>
</h3>
</div>
</div>
</div>

Here is the CSS.

.countup .sep {
display: inline-block;
padding: 50px;
background: rgba(0, 128, 128, 0.707);
margin: 0;
color: rgb(0, 0, 0);
min-width: 2.6rem;
border-radius: 10px;
}

I'd be grateful for any help on this!

I tried moving around the script tag to the body, to above bootstrap and to under bootstrap. I also tried adding a window.onload to the JS but that didn't work either. Help?

The error is in the line:

<div id="three" class="countup" id="countup1">

You defined two differents id, and the javascript code can't find the id "countup1".
Just delete the id "three" in the line.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

window.addEventListener('load', (event) => {
countUpFromTime("July 9, 2021 12:00:00");
});
function countUpFromTime(countFrom) {
countFrom = new Date(countFrom).getTime();
var now = new Date(),
countFrom = new Date(countFrom),
timeDifference = (now - countFrom);
var secondsInADay = 60 * 60 * 1000 * 24,
secondsInAHour = 60 * 60 * 1000;
days = Math.floor(timeDifference / (secondsInADay) * 1);
hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = mins;
document.getElementById('seconds').innerHTML = secs;
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom); }, 1000);
};

<!-- language: lang-css -->

.countup .sep {
display: inline-block;
padding: 50px;
background: rgba(0, 128, 128, 0.707);
margin: 0;
color: rgb(0, 0, 0);
min-width: 2.6rem;
border-radius: 10px;
}

<!-- language: lang-html -->

<div>
<h3 id="one">So... How long has it been?</h3>
<br>
<h3 id="two"><b>Let's see!</b></h2>
<br><br>
<h3>
<div id="three" class="countup" id="countup1">
<span class="sep">
<span class="timeel" id="days">00</span>
<br>
<span class="timeel timeRefDays">days</span>
</span>
<span class="sep">
<span class="timeel" id="hours">00</span>
<br>
<span class="timeel timeRefHours">hours</span>
</span>
<span class="sep">
<span class="timeel" id="minutes">00</span>
<br>
<span class="timeel timeRefMinutes">minutes</span>
</span>
<span class="sep">
<span class="timeel" id="seconds">00</span>
<br>
<span class="timeel timeRefSeconds">seconds</span>
</span>
</div>
</h3>
</div>

<!-- end snippet -->

In the original code, an ID parameter was passed to the countUpFromTime function, and an attempt was made to retrieve elements using the specified ID and their class names. However, it appears that these elements could not be found using class names. To address this, I modified the code by replacing the class-based element retrieval with direct selection using the elements' IDs.

In the modified code, I removed the ID parameter from the countUpFromTime function because it was no longer necessary.