How to change navwalker’s dropdown mark-up?

STEP 1 add a script to header like below ( it’s always better go for the enqueue method . i need some one to help me with properly adding the below script in WordPress way .jquery should run before the second script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });


  return false;
});
});

</script>

STEP 2 Add the css like below :

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

STEP 3 Now go inside the walker class : search for && 0 === $depth and remove it. Also make sure that

'depth' => 3

Now it should start showing the 3rd level menu . some additional css might be required.
Just let me know how it goes