Selector Example

HTML

<div>
  <div style="display: none;">
    <div id="adventures">
      First adventures
    </div>

    <div id="adventures">
      Second adventures
    </div>

    <div class="classes">
      First Class
    </div>

    <div class="classes">
      Second Class
    </div>
  </div>

  <div id="adventuresOutput">
  </div>

  <div id="classesOutput">
  </div>
</div>

<div>
  <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
    <li class="dropdown has-children">
      <!-- dropdown -->
      <a onclick="adventures(this)" class="dropbtn">Adventures</a>
      <div id="adventures" class="dropdown-content">
        <a href="#">Adventure 1</a>
        <a href="#">Adventure 2</a>
      </div>
    </li>
    <li><a href="#about-section" class="nav-link">About</a></li>
    <li><a href="#contact-section" class="nav-link">Contact</a></li>
  </ul>
  <ul class="site-mobile-menu-body">
  </ul>
</div>

JavaScript

$('#adventuresOutput').append($('#adventures'));

$('#classesOutput').append($('.classes'));

$('.dropdown-content').hide();

function adventures(target) {
  $this = $(target)
  $this.next().show();
}

$('.js-clone-nav').each(function() {
  var $this = $(this);
  $this.clone(true).attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
});