So I'm trying to add and remove a class to a sub-menu when clicking an element that is separate. My structure is:

<li id="menu-item-315"><a href="#">Sample Page 1</a></li>

<li id="menu-item-316"><a href="#">Sample Page 2</a>
<ul class="sub-menu">
    <li id="menu-item-407"><a href="#">Sample Page 3</a></li>
    <li id="menu-item-408"><a href="#">Sample page 4</a></li>
    <li id="menu-item-409"><a href="#">Sample Page 5</a></li>
</ul>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</li>

<li id="menu-item-317"><a href="#">Sample Page 6</a>
<ul class="sub-menu">
    <li id="menu-item-410"><a href="#">Sample Page 7</a></li>
    <li id="menu-item-311"><a href="#">Sample page 8</a></li>
    <li id="menu-item-412"><a href="#">Sample Page 9</a></li>
</ul>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</li>

<li id="menu-item-318"><a href="#">Sample Page 10</a></li>

Clicking the <span class="dashicons dashicons-arrow-down-alt2"></span>

Should toggle a class menu on the sub-menus. Which it does using:

jQuery(document).ready(function($){
  jQuery(".dashicons").click(function() {
  jQuery(".sub-menu").toggleClass("show");
});
  });

Problem is it toggles for all the .sub-menus rather then just the one in the same parent <li>

Any ways of making it toggle only for the sub menu in the same <li>?