I would like to add a div at the after a sub menu. I would like to apply this change only if the parent menu item has a class name of product-menu (comes from CSS class field under menus section in WP Admin).

This is the markup I want.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Categories</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Vehicles</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cars and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Hire</a></li>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Beauty</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
        </ul>
      </li>
    </ul>
    <div>SHOW ONCE</div>
  </div>
</li>

This is what I have so far.

class WP_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = ( $depth > 0  ? str_repeat( "\\t", $depth ) : \'\' ); // code indent
            $display_depth = ( $depth + 1); // because it counts the first submenu as 0
            $classes = array(
                    \'sub-menu\',
                    \'sub-menu-level-\' . $display_depth
            );
            $class_names = implode( \' \', $classes );

            if ($display_depth == 1) {
                    $output .= "\\n" . $indent . \'<div class="sub-menu__wrapper"><ul class="\' . $class_names . \'">\' . "\\n";
            } else {
                    $output .= "\\n" . $indent . \'<ul class="\' . $class_names . \'">\' . "\\n";
            }
    }

    function end_lvl(&$output, $depth = 0, $args = array()) {
      if ($depth = 2){
        $output .= \'<div>SHOW ONCE</div></ul>\';
      } else {
        $output .= \'</ul>\';
      }
  }    
}

And what is currently being returned.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Categories</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Vehicles</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cars and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Hire</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Beauty</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <div>SHOW ONCE</div>
    </ul>
  </div>
</li>

As you can see the div I\'m trying to add is getting added multiple times. How can I get the div to only appear once straight after the sub-menu-level-1 list?

Also how can I apply this change so it only applies for this particular menu with the class name of product-menu? Other sub menus don\'t require this additional div hence why I\'m trying to do it by class name.