add/remove Class with click anywhere to remove class except child elements or child cancel button

I'm attempting to create a navigation that transitions on click event. It also contains a link with another transition effect on click event. I want to use a class so that I can style accordingly with the media queries. I'm new to JS/jQuery and I've researched/managed to get the toggles to work but I'm stuck in trying to cleanly write a method to achieve the following:

When click on on nav-toggle

• addClass isVisible to .nav-toggle
• addClass isVisible to .menu

When click on eventList-toggle

• remove class isVisible from .nav-toggle
• remove class isVisible from .menu
• add class isVisible to #events

When click anywhere other than #events or on submit and cancel buttons

• remove class isVisible from #events

I wrote a basic fiddle with what I currently have but still can't get the submit and cancel buttons to close the #events element nor does this hide the menu on click of Events stuff link (menu will only hide in device viewports hence the class). https://jsfiddle.net/ngoh8gej:

I may be way off in my code and even embarrassed but I believe this gets the point across for the question. Any help is greatly appreciated. Thanks in advance.