Bootstrap 4 Multi dropdown nav toggle issue

Question

I have a drop-down menu which works with bootstrap 4 alpha. But it's not working in bootstrap 4 beta.

When I click on the 2nd dropdown menu it closes automatically. But it was working fine before.

I've tried change the div with a ul dropdown inside a drop-down, but that doesn't work in beta version but it was working fine in alpha. Can someone help me with this one?

Here is the jsfiddle link

Here's the dropdown link code structure:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#">Submenu action</a></li>
                 <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                 <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                  </ul>
                 </li>
                 <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                  </ul>
                 </li>
                </ul>
            </li>
          </ul>
      </li>
    </ul>
  </div>
</nav>

Javascript

$( document ).ready( function () {
    $( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        $( this ).parent( "li" ).toggleClass( 'show' );

        if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }
        $( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );
        return true;
    } );
});

CSS

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-menu li > a {
    padding: 10px 15px;
    color: #000;

}

.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
    background: transparent;
    outline: 0;
}


.dropdown-menu .show > .dropdown-toggle::after{
    transform: rotate(-90deg);
}