Menu-link only works on index.html and no other page

For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS

.list-menu {
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.9);
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  opacity: 0;
  z-index: -1;
}

.list-menu.reveal-modal {
  opacity: 1;
  z-index: 999999;
  visibility: visible;
}

.list-menu .ion-close-round {
  font-size: 31px;
  position: absolute;
  top: 32px;
  right: 32px;
  color: #fff;
  cursor: pointer;
}
.circle {
  width: 45px;
  height: 45px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  cursor: pointer;
  z-index:99 ;
  padding: 0px 0 0;
}



.circle i {
  font-size: 36px;
  color: #111112;
}

.circle.dark {
  border-color: #292929;
}

.circle.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.large {
  height: 120px;
  width: 120px;
  margin-top: -60px;
  margin-left: -60px;
}

.circle.large:before {
  margin-top: -18px;
  margin-left: -10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 31.0px;
  border-color: transparent transparent transparent #ffffff;
}

.circle.large.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.inline {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
  display: inline-block;
  z-index: 0;
}

@media all and (max-width: 1000px) {
  .circle.large {
    width: 90px;
    height: 90px;
    margin-top: -45px
    ;
  }
  .circle.large:before {
    margin-top: -14px;
    margin-left: -8px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25.0px;
    border-color: transparent transparent transparent #fff;
  }
}

and the JavaScript.

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

    $('.menu-container').each(function(index) {
        $(this).find('.circle').attr('menu-link', index);
        $(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
    });

    $('.menu-container .circle').click(function() {
        var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
        linkedVideo.toggleClass('reveal-modal');
       
    });

    $('section').closest('body').find('.close-iframe').click(function() {
        $(this).closest('.list-menu').toggleClass('reveal-modal');
    });
    

Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis

I've been trying to fix for a while but can't seem to find a fix.

Here is also the html for both index.html and hotelam.html First index

<!-- Navigation section ()
================================================== -->
<div class="nav-container">
   <nav class="nav-inner transparent">

      <div class="navbar">
         <div class="container">
            <div class="row">
                
              <div class="brand">
                 <a href="home.html">
                <img src="images/Logo4.png" ></a>
            </a>
              </div>

              <div class="navicon">
                <div class="menu-container">

                  <div class="circle dark inline">
                    <i class="icon ion-navicon"></i>
                  </div>

                  <div class="list-menu">
                    <i class="icon ion-close-round close-iframe"></i>
                    <div class="intro-inner">
                      <ul id="nav-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                      </ul>
                    </div>
                  </div>
              </div>

                </div>
              </div>

            </div>
         </div>
      </div>

   </nav>
</div>

    

Second Hotelam.html

<!-- Navigation section
================================================== -->
<div class="nav-container">
   <nav class="nav-inner transparent">

      <div class="navbar">
        <div class="color9">
         <div class="container">
            <div class="row">

              <div class="brand2">
                 <a href="home.html">
                <img src="images/brandl.png" ></a>
            </a>
              </div>

              <div class="navicon">
                <div class="menu-container">

                  <div class="circle dark inline">
                    <i class="icon ion-navicon"></i>
                  </div>

                  <div class="list-menu">
                    <i class="icon ion-close-round close-iframe"></i>
                    <div class="intro-inner">
                      <ul id="nav-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                      </ul>
                    </div>
                  </div>
</div>
                </div>
              </div>

            </div>
         </div>
      </div>

   </nav>
</div>
</div>