How to make menu button removeClass for two levels of unordered list?

I’m trying to solve an issue with my mobile menu, where if the user closes a child submenu using the toggle buttons, all of the subordinate levels of the menu (grandchild submenus) currently remain open when the submenu is reopened.

I am trying to make it so that by clicking the ul ulsubmenu button to close the child menu, it removes the .open class for the ul ul ul grandchild submenu as well.

The problem seems to be that I am unable to give the submenu buttons an id or class, due to the way that I have used the jQuery to insert them. Therefore I am unable to tell each level of submenu buttons which level of the menu to target.

I have tried to achieve this using a combination of the .children() and .find() selectors, but haven’t had any success. Can anyone tell me the correct way in which I could do this?

Note: I have used PHP to configure the menu structure via WordPress, so I have little control over the html

https://jsfiddle.net/8nj5y4t1/44/

HTML:

<nav class="main-menu" id="mobile">
    <div class="menu-header-menu-container">
        <ul id="menu-header-menu-1" class="menu">
            <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://www.mywebsite.com">Link 1</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"><a href="http://www.mywebsite.comwork/">Link 2</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.comwork/landscapes/">Child-link 1</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.mywebsite.comwork/seascapes/">Child-link 2</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.comwork/macro/">Child-link 3</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.comwork/cities/">Child-link 4</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-475"><a href="http://www.mywebsite.comwork/long-exposure/">Child-link 5</a>
                        <ul class="sub-menu">
                             <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.comwork/miscellaneous/">Grandchild-link 1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">Link 3</a>
            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.lucieaverillphotography.co.uk/shop/">Link 4</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.lucieaverillphotography.co.uk/contact/">Link 5</a></li>
        </ul>
    </div>
</nav>

CSS:

nav.main-menu#mobile {
  min-width:300px;
  max-width:400px;
  background-color:orange;
  padding-top:20px;
  padding-bottom:20px;
}

nav.main-menu#mobile ul { 
    position:relative; 
    overflow: auto; 
    margin:0;
    padding:0;
}

nav.main-menu#mobile ul li {
    display:inline-block; 
    float:left; 
    width: 100%;
    overflow-x: hidden; 
}

nav.main-menu#mobile ul li a {
    display:inline-block;
    height: auto;
    width: 200px;
    padding:15px 0px 15px 30px;
    font-family: Open Sans, Helvetica;
    font-size: 18px;
    color:purple;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.submenu-button {
  cursor:pointer;
  float:right;
  padding:15px 20px 15px 20px;
}

nav.main-menu#mobile ul ul {
  max-height:0;
  width:100%;
  transition: all 800ms;
  background-color:white;
  overflow:hidden;
}

nav.main-menu#mobile ul ul.open { 
  max-height:1000px;
  background-color:green;
}

nav.main-menu#mobile ul ul li {
  transition:2s;
}

nav.main-menu#mobile ul ul li a {
  padding-left: 45px;
  font-size: 16px;
  transition:2s;
}

nav.main-menu#mobile ul ul li.open a {
  color:yellow;
}

nav.main-menu#mobile ul ul ul {
  background-color:white;
}

nav.main-menu#mobile ul ul ul.open {
  background-color:green;
}

nav.main-menu#mobile ul ul ul li a {
  padding-left:60px;
}

jQuery:

jQuery(document).ready(function($) {

$('<span class="submenu-button">+</span>').insertBefore('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li');

$('.submenu-button').click(function() {
    $(this).next().toggleClass('open').children('li').toggleClass('open');
   // $('nav.main-menu#mobile ul li').next().toggleClass('open').children('li').toggleClass('open');

});

});

Updated JQuery:

$(‘.submenu-button’).click(function() {
$(this).toggleClass(‘open’);
$(this).next().toggleClass(‘open’).children(‘li’).toggleClass(‘open’).find(‘li,ul’).removeClass(‘open’);

});