How to apply different classes on different elements based on the text inside?

HTML

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-401 dt-mega-menu mega-auto-width mega-column-3">
    <a href='#' data-level='1'>
        <i class="logo-png dnld-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Download App</span>
        </span>
    </a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71">
    <a href='#' data-level='1'>
        <i class="logo-png subs-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Purchase Subscription</span>
        </span>
    </a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-74 has-children">
    <a href='#' class='not-clickable-item' data-level='1'>
        <i class="logo-png help-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Help</span>
        </span>
    </a>
    <ul class="sub-nav gradient-hover hover-style-click-bg level-arrows-on">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 first">
            <a href='#' data-level='2'>
                <i class="logo-png faqs-logo"></i>
                <span class="menu-item-text">
                        <span class="menu-text">FAQS</span>
                </span>
            </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
            <a href='#' data-level='2'>
                <i class="logo-png vid-logo"></i>
                <span class="menu-item-text">
                        <span class="menu-text">Instructional Videos</span>
                </span>
            </a>
        </li>
    </ul>
</li>

There are more than 20 elements like that. And there is a different class for the inner most span which should only be applied if it is clicked. The classes only contain the color of text.

JQuery

(function($) {
    $(document).ready(function() {
        $('li.act > a > i').removeClass('logo-png').addClass('activatedd');

        function addEventListenerByClass(className, event, fn) {
            var list = document.getElementsByClassName(className);
            for (var i = 0, len = list.length; i < len; i++) {
                list[i].addEventListener(event, fn, true);
            }
        }

        addEventListenerByClass('menu-item', 'click', showIcon);

        var cssClasses = ['home-text', 'about-text', 'print-text', 'dnld-text', 'subs-text', 'help-text', 'sorks-text', 'cont-text', 'work-text', 'col-text', 'body-text', 'hst-text', 'space-text', 'cell-text', 'organ-text', 'system-text', 'cs-text', 'ae-text', 'ag-text', 'bsi-text', 'med-text', 'tudors-text', 'roma-text', 'vict-text', 'vik-text', 'ww-text', 'ss-text', 'pe-text', 'sc-text', 'faqs-text', 'vid-text', 'email-text', 'trial-text', 'next-text'];


        function showIcon() {
            $("#primary-menu .act").removeClass("act");
            $("#primary-menu .activatedd").removeClass("activatedd").addClass("logo-png");
            //Add active class for is parent if it is level 1
            $(this).addClass("act").parents("li").addClass("act");
            $('> a > i', $(this)).removeClass("logo-png").addClass("activatedd").parents().find("li.act>a>i.logo-png").removeClass("logo-png").addClass("activatedd");
        }
    })
})(jQuery);

var cssClasses contains all the classes that we have to apply. Now for the given HTML, <span class="menu-text">Download App</span> will be applied dnld-text class. But when some other element is clicked, say FAQs, this class needs to be removed and FAQs's class and its parent's class needs to be applied. The javascript function wrote does about the same thing for icons but it is applying same class and removing same class from all elements. We can also single out the elements based on the class of i.e. $('i + span > span'). How am i supposed to do this?