Ajax подгрузка мобильного меню (hc-offcanvas-nav)

$('#mobMenuBtn').click(function() { 
  $('#mobileNav').show(); 
});

<header> 
  <button id="mobMenuBtn">Кнопка Меню</button> 
</header> 
 
<nav id="mobileNav" hidden> 
  <ul> 
    <li><a href="/" style="text-transform: uppercase;"><strong>Главная</strong></a></li> 
    <li><a href="/about" style="text-transform: uppercase;"><strong>О нас</strong></a></li> 
    <li><a href="/contact" style="text-transform: uppercase;"><strong>Контакты</strong></a></li> 
  </ul> 
</nav> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

let trigM = false; 
 
$("body").on("click", "#menu", function() { 
  if (!trigM) { 
   
    trigM = true; 
    let menuWrapper = document.createElement('div'); 
    let menuUl = document.createElement('ul'); 
 
    menuWrapper.classList.add('menu_mobile'); 
 
    document.body.appendChild(menuWrapper); 
    menuWrapper.appendChild(menuUl) 
 
    var arrayLinksText = ['menu link 1', 'menu link 2', 'menu link 3', 'menu link 4']; 
    var arrayLinks = ['http://somelink-1', 'http://somelink-2', 'http://somelink-3', 'http://somelink-4'] 
 
    for (let i = 0; i < arrayLinksText.length; i++) { 
      let menuLi = document.createElement('li'); 
      let menuA = document.createElement('a'); 
      menuA.setAttribute('href', arrayLinks[0 + 1]); 
      menuUl.appendChild(menuLi); 
      menuLi.appendChild(menuA); 
      menuA.innerHTML = arrayLinksText[0 + i]; 
    } 
     
  } else { 
   
    trigM = false; 
    document.querySelector('.menu_mobile').remove() 
    //menuWrapper.remove();  
     
  } 
});

.menu_mobile { 
  position: absolute; 
  top: 50px; 
  left: 0; 
  background: #fff; 
  z-index: 10; 
  border: 1px solid #000; 
  padding: 15px; 
} 
 
.menu_mobile ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
.menu_mobile ul li { 
  margin-bottom: 15px; 
}

<div class="menu" id="menu">MENU</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>