将material.io菜单组件附加到具有相同类的所有元素

Question

我正在尝试找到一种方法来在包含多个菜单的网页上附加material.io菜单。我尝试使用jQuery的每个函数，但显然代码不起作用。这是material.io建议的原始代码（仅适用于一个菜单）

var menu_element = document.querySelector('.obox-admin-menu') !== null;
if (menu_element) {
    var menuEl = document.querySelector('.obox-admin-menu');
    var menu = new mdc.menu.MDCMenu(menuEl);
    var menuButtonEl = document.querySelector('.obox-admin-menu-btn');
    menuButtonEl.addEventListener('click', function() {
        menu.open = !menu.open;
    });
}

这是我尝试使用jQuery但它失败了。

$( '.mdc-menu-anchor' ).each(function() {
    var menuEl = $( this ).find('.obox-admin-menu');
    var menu = new mdc.menu.MDCMenu(menuEl);
    var menuButtonEl = $( this ).find('.obox-admin-menu-btn');
    $( document ).on( 'click', menuButtonEl, 'click', function() {
        menu.open = !menu.open;
    });
});

我在这里做错了什么？我正在尝试为具有相同类和标记的多个元素创建菜单触发器，我认为这可以通过循环实现，但我是javascript的新手。

更新

基于connexo的评论我现在已经添加了我正在寻找的功能（希望这个代码方法很好）

var list = document.querySelectorAll( '.mdc-menu-anchor' );
Array.prototype.forEach.call(list, function (item) {
    var menuEl = item.querySelector('.obox-admin-menu');
    let menu = new mdc.menu.MDCMenu(menuEl);
    let menuButtonEl = item.querySelector('.obox-admin-menu-btn');
    menuButtonEl.addEventListener('click', function() {
        menu.open = !menu.open;
    });
});