Question

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>

</ul>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</li>

</ul>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</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() {

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>?