使用fullPage.js将活动类添加到两个/拆分菜单

Question

I'm using fullPage.JS and have the section Menu working fine (scrolls up and down) apart from I want half my menu in the header and half in the footer. This works fine for navigation but is not adding the class "active" to the li in the footer only to the header. I'm assuming its because both menu's have the same ID as removing the header menu id makes the footer menu work with the active class. How do I get both to work? callbacks perhaps?

Similar to this answer: FullPage.js - add active class to menu anchor when on a nonematching section

$('#fullpage').fullpage({
    anchors: ['PAGE1','PAGE2','PAGE3','PAGE4','PAGE5','PAGE6',],
    menu:'#menu',
});

<div id="headermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE1"><a href="#PAGE1">PAGE1</a></li>
        <li data-menuanchor="PAGE2"><a href="#PAGE2">PAGE2</a></li>
        <li data-menuanchor="PAGE3"><a href="#PAGE3">PAGE3</a></li>
    </ul>
</div>

<div id="footermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE4"><a href="#PAGE4">PAGE4</a></li>
        <li data-menuanchor="PAGE5"><a href="#PAGE5">PAGE5</a></li>
        <li data-menuanchor="PAGE6"><a href="#PAGE6">PAGE6</a></li>
    </ul>
</div>

Answer 1

In HTML the id attribute must be unique. If you want a selector to apply to more than one element use CSS classes, eg:

<ul class="my-menu">
</ul>

...
<ul class="my-menu">
</ul>

Then your selector would look like:

menu:'.my-menu'