I've got this menu on my site:

<ul id="menu-primary" class="offcanvas">
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
</ul>

I added in some Jquery to hide the sub-menus and to show them once you click on the parent link but this causes the parent link not to function and just toggle the sub-menu.

So i'd like to add a toggle-able element via a <i> tag or <span> tag after the main parent link and then just change the jquery to target that instead making the main parent link still click-able.

How would I go about doing this?