I have this JQuery script in my functions.php

function hideout_scripts() {
wp_enqueue_style( 'hideout-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_style_add_data( 'hideout-style', 'rtl', 'replace' );
    wp_enqueue_script( 'hideout-navigation', get_template_directory_uri() . '/js/main-nav.js', array('jquery'), '1.0.0', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'hideout_scripts' );

It loads with this error

Uncaught ReferenceError: openNav is not defined
at HTMLElement.onclick ((index):288)

here's my code

$(document).ready(function() {
    var nav = $("#menu > ul > li");
    nav.find("li").hide();
nav.click(function () {
    nav.not(this).find("li").hide();
    $(this).find("li").slideToggle();
});

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("close").style.display = "flex";
    $("#menu ul").slideToggle();
}

function closeNav() {
    document.getElementById("open").style.display = "flex";
    document.getElementById("close").style.display = "none";
    $("#menu ul").slideToggle();
}

$(function () {
    nav.mouseleave(function () {
$(this).find("li").slideUp();
    });
});

$(window).on("resize load", function () {
    var win = $(this);
if (win.width() <= 973) {
    $("#close").attr("style", "display:none;");
    $("#open").attr("style", "display:flex;");
    $("#menu ul").attr("style", "display:none;");
} else {
    $("#close").attr("style", "display:flex;");
    $("#menu ul").attr("style", "display:flex;");
    }
});

HTML

<i id="open" onclick="openNav()" class="icon-bars-solid"></i> <i id="close" onclick="closeNav()" class="icon-times-solid"></i>

My code works on code pen but if I use it on my site it conflicts with other scripts on WP. I'm lost, I just don't get why it does not work