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.