wrap() function dependent on parent ID

Question

I have two links with two different megamenu settings:

• The toggle uses a click effect along with a 3 column width dropdown (column-width-3, mode-click).

• The Products link uses a hover effect along with a full width column (column-justify, mode-hover).

Source code:

if ($("uk-navbar-container").has(".mega-menu-active")) {

  var get_id = $(".uk-navbar-dropdown-grid").prop('id');
  // console.log( get_id );


  if ($('#' + get_id).hasClass("column-justify")) {
    if ($('#' + get_id).hasClass("mode-click")) {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="mode:click;"></div>');
    } else {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="..."></div>');
    }
  } else {

    if ($('#' + get_id).hasClass("mode-click")) {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="mode:click;"></div>');
    } else {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="..."></div>');
    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uk-navbar-left">
  <ul class="uk-navbar-nav">

    <a href="#" class="uk-navbar-toggle mega-menu-active"><span class="toggle-icon"></span></a>

    <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3" uk-drop="...">
      <div id="megamenu-954" class="uk-navbar-dropdown-grid uk-grid column-width-3 mode-click megamenu-954">
        <div class="uk-width-1-3">
          <ul class="uk-navbar-dropdown-nav">
            <li>...</li>
            <li>...</li>
          </ul>
        </div>

      </div>
    </div>


    <li id="menu-item-950" class="mega-menu-active">
      <a href="#">Products</a>

      <div class="uk-navbar-dropdown" uk-drop="...">
        <div id="megamenu-946" class="uk-navbar-dropdown-grid column-justify mode-hover megamenu-946">

          <div class="uk-width-1-3">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li>...</li>
              <li>...</li>
            </ul>
          </div>

        </div>
      </div>

    </li>


  </ul>
</div>

I use the wrap() function to add a bit of extra code to make the click/hover and column width possible.

The problem that I have is that, although the Products link has column-justify and mode-hover classes, the width is column-width-3 (same as toggle).

Plus for both, the hover effect is used for both links (while toggle alone should be on click mode and hover mode is for the Products link).