Using JS variables with WordPress menu fails

Question

I'm using wp_nav_menu to load a WordPress menu as follows:

<?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-1',
                        // 'menu_id'        => 'primary-menu',
                        // 'menu_class'  => 'menu-desktop',
                        'items_wrap' => '<ul id="primary-menu" class="menu-desktop">%3$s <li class="toggle-search"><i class="material-icons search-toggle-icon">search</i><div class="nav-search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="Search KILJ" name="s" id="s" /><button type="submit" id="searchsubmit"><i class="material-icons">search</i></button></form></div></li</ul>',
                    )
                );
                ?>

I've tried assigning a javascript variable to the 'search-toggle-icon' and 'nav-search' classes, and using those variables to toggle visibility. Doing this doesn't work. If I don't use JS variables and just reference the css classes 'search-toggle-icon' and 'nav-search', the js show/hide works, but if I create variables and try using js variables to do the show/hide, it doesn't work.

I've created a CodePen example showing that using variables with a menu that is NOT wordpress-generated works fine, but if I use the SAME javascript code with a wp_nav_menu() generated menu, it fails.

if I console.log the variables, the console displays those nodes just fine, even with the 'display:none' that the jquery .hide() performed - it just doesn't actually hide the div on the webpage. It's as if the jquery runs before the website fully loads, and the console.log of the variable displays the jquery modified html even though that modified HTML (adding display: none;) isn't present in the live HTML.

Here is my javascript code that doesn't work due to using variables for the two classes (search-toggle-icon & nav-search). If I switch all references to these variables to just be the class name, everything works great.

'use strict';
$(document).ready(function(){

    var navSearchBox = document.querySelector('.nav-search');
    var searchIcon = document.querySelector('.search-toggle-icon');

    var isNavMobile = window.matchMedia( '(max-width: 1060px)' );

    // Define a callback function for the event listener.
    function handleNavMediaQueryChange( e ) {

        if ( e.matches ) {
            //show nav search on mobile
            $( navSearchBox ).show();
            $( navSearchBox ).attr( 'aria-expanded', 'true' );
            $( navSearchBox ).attr( 'aria-hidden', 'false' );
        } else {
            //hide nav search on desktop
            $( navSearchBox ).hide();
            $( navSearchBox ).attr( 'aria-expanded', 'false' );
            $( navSearchBox ).attr( 'aria-hidden', 'true' );
            $( searchIcon ).off( 'click' ).on( 'click', function(){
                var iconText = $(".nav-search").is(':visible') ? 'search' : 'close';
                $(searchIcon).text(iconText);
                $( navSearchBox ).slideToggle();
                $( navSearchBox ).attr( 'aria-hidden', $( '.nav-search' ).attr( 'aria-hidden' ) === 'false' ? 'true' : 'false' );
        
            });
        }
    }

    // Run the isNavMobile change handler once.
    handleNavMediaQueryChange( isNavMobile );

    // Add the callback function as a listener to the query list.
    isNavMobile.addEventListener( 'change', handleNavMediaQueryChange );

});

I have tried testing js variable creation and doing things with those variables for items on my page that are NOT part of the WP_NAV_MENU and they work great. It's just js variable usage for items within the wp_nav_menu() that don't work.

Is there something about wp_nav_menu that makes JS variables not work well? Do I need to do something more to require the page to be loaded and ready before using those variables? Interestingly, if I console.log those variables, they successfully show me the correct node, but executing the JS (show/hide,etc) doesn't work.