Nested click event handler causing issue of running handler multiple times on a single click

Question

I am building a multi-level menu which has click events attached to menu items which have child items under them.

My demo JSFiddle below shows my issue. When a parent menu item has a child item witch also has a child item it them triggers my click event handler 2 times. Each level deep it goes will trigger the event +1 times.

How can I make this demo only handle 1 click event regardless of which level the menu item is on?

Right now the click event is attached to the CSS class .tag-menu-arrow so when a child item has its own child items it makes multiple levels with the .tag-menu-arrow class nested under each other resulting in the click handler firing multiple times.

Demo https://jsfiddle.net/jasondavis/m6bxujoe/

HTML Menu

<ul id="tag-menu">
    <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="JavaScript">JavaScript</a>
        <ul>
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
                <ul>
                    <li><a href="#"><span class="sub-folder"></span> Marketing</a>
                    </li>
                </ul>
            </li>
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="jQuery">jQuery</a>
                <ul>
                    <li><a href="#"><span class="sub-folder"></span> WebDev</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="sub-folder"></span> NodeJS</a>
            </li>
            <li><a href="#"><span class="sub-folder"></span> Templates</a>
            </li>
        </ul>
    </li>
    <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="PHP">PHP</a>
        <ul class="open">
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
                <ul class="">
                    <li><a href="#"><span class="sub-folder"></span> Marketing</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="sub-folder"></span> Marketing</a>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$( document ).ready(function() {
  $( '.parent-tag-menu' ).on('click', '.tag-menu-arrow', function() {
    $(this).next().next().toggleClass( 'open' );
  });
});