Codepen code doesn't work on my local files -- code provided

I recently got help on the following question in which a codepen was provided: https://codepen.io/diego-fortes/pen/GRvRPzX

Can anyone get this code to run on a local computer as it does in the codepen? If so, can you provide that code? (I believe the jquery 3.6.0 file which is included in the same folder may not be linking properly --> my bar hover is stuck on bar 1 and only cursor changes when I hover over the other bars)

Any help would be super useful! Thanks

Here's the HTML, CSS, and JS that I used on my local computer: JS:

<head>
    <script src="jquery-3.6.0.min.js"></script>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

    <script type="text/javascript">
            const $navbars = document.querySelectorAll(`.navbar-item`);

            function removeSelected() {
                const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);

                if (!$selected) {
                    return;
                }

                for (let each of $selected) {
                    each.classList.remove("navbar-item--selected");
                    each.classList.remove("slider-item--visible");
                }

            }

            for (let each of $navbars) {
                each.addEventListener("mouseover", function () {

                    removeSelected();

                    const position = each.getAttribute("data-position");
                    const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)

                    each.classList.add("navbar-item--selected")
                    $item.classList.add("slider-item--visible");
                });
            }
    </script>

</head>

HTML:

 <body>

    <div class="wrapper">
        <div class="slider">
            <div class="slider-item slider-item--visible">
                hello item 1
            </div>
            <div class="slider-item">
                hello item 2
            </div>
            <div class="slider-item">
                hello item 3
            </div>
        </div>
        <nav class="navbar">
            <span class="navbar-item navbar-item--selected" data-position="1"></span>
            <span class="navbar-item" data-position="2"></span>
            <span class="navbar-item" data-position="3"></span>
        </nav>
    </div>

</body>

CSS:

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* Slider */
.slider {
    max-width: 100%;
    width: 100%;
}

.slider-item {
    display: none;
}

.slider-item--visible {
    display: block;
}

/* Navbar */
.navbar {
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    height: 8px;
}

.navbar-item {
    max-width: 33.3%;
    width: 100%;
    display: block;
    height: 5px;
    cursor: pointer;
    opacity: .5;
    transition: all .2s;
}

.navbar-item--selected {
    height:10px;
    opacity: 1;
}

/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
    background: salmon;
}

.navbar-item:nth-child(2) {
    background: lightblue;
}

.navbar-item:nth-child(3){
    background: #19be29;
}

Solution

Your code doesn't work because your Javascript is above HTML.
In your case, document.querySelector cannot select anything.

Please move the JavaScript code to bottom of HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            display:  block;
        }
        
        /* Slider */
        .slider{
            max-width: 100%;
            width: 100%;
        }
        
        .slider-item{
            display: none;
        }
        .slider-item--visible{
            display: block;
        }
        
        /* Navbar */
        .navbar{
            max-width: 100%;
            display: flex;
            align-items: flex-end;
            height: 8px;
        }
        .navbar-item{
            max-width: 33.3%;
            width: 100%;
            display: block;
            height: 5px;
            cursor: pointer;
            opacity: .5;
            transition: all .2s; 
        }
        
        .navbar-item--selected{
            height: 8px;
            opacity: 1;
        }
        
        /* Meaningless styles (colors) */ 
        .navbar-item:nth-child(1){
            background: salmon;
        }
        
        .navbar-item:nth-child(2){
            background: lightblue;
        }
        
        .navbar-item:nth-child(3){
            background: #19be29;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="slider">
        <div class="slider-item slider-item--visible">
            hello item 1
        </div>
        <div class="slider-item">
            hello item 2
        </div>
        <div class="slider-item">
            hello item 3
        </div>
    </div>
    <nav class="navbar">
        <span class="navbar-item navbar-item--selected" data-position="1"></span>
        <span class="navbar-item" data-position="2"></span>
        <span class="navbar-item" data-position="3"></span>
    </nav>
    </div>
    <script>
        const $navbars = document.querySelectorAll(`.navbar-item`);


function removeSelected(){
    const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
    
    if (!$selected){
        return;
    }
    
    for (let each of $selected){
        each.classList.remove("navbar-item--selected");
        each.classList.remove("slider-item--visible");
    }
    
}

for (let each of $navbars){
    each.addEventListener("mouseover", function(){
        
        removeSelected();
        
        const position = each.getAttribute("data-position");
        const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
        
        each.classList.add("navbar-item--selected")
        $item.classList.add("slider-item--visible");
    });
}
    </script>
</body>

</html>