Esto abre más texto cuando hago clic en un botón. Ahora necesito más de estos en una página web. Dupliqué la función y renombré en las líneas constantes los nombres a menubutton2 y dropdownmenu3 pero el segundo botón no funciona

 import wixAnimations from 'wix-animations'; $w.onReady(function() { activeMenu(); }); function activeMenu() { const menuButton = $w('#menuButton'); const dropdwonMenu = $w('#dropdownMenu'); const dropdownBoxHeight = 0; const dropdownAnimation = wixAnimations.timeline().add(dropdwonMenu, { y: 0, duration: 100 }); wixAnimations.timeline().add(dropdwonMenu, { y: - dropdownBoxHeight }).play(); menuButton.onClick(() => { dropdwonMenu.collapsed ? openMenu() : closeMenu(); }); dropdownAnimation.onReverseComplete(() => { dropdwonMenu.collapse(); }); function openMenu() { dropdwonMenu.expand().then(() => { dropdownAnimation.play(); }) } function closeMenu() { dropdownAnimation.reverse(); } } import wixAnimations from 'wix-animations'; $w.onReady(function() { activeMenu(); }); function activeMenu() { const menuButton = $w('#menuButton2'); const dropdwonMenu = $w('#dropdownMenu2'); const dropdownBoxHeight = 0; const dropdownAnimation = wixAnimations.timeline().add(dropdwonMenu, { y: 0, duration: 100 }); wixAnimations.timeline().add(dropdwonMenu, { y: - dropdownBoxHeight }).play(); menuButton.onClick(() => { dropdwonMenu.collapsed ? openMenu() : closeMenu(); }); dropdownAnimation.onReverseComplete(() => { dropdwonMenu.collapse(); }); function openMenu() { dropdwonMenu.expand().then(() => { dropdownAnimation.play(); }) } function closeMenu() { dropdownAnimation.reverse(); } }