This opens more text when I click a button. Now I need more of these on a web page. I duplicated the function and renamed in const lines the names to menubutton2 and dropdownmenu3 but the second button doesn't work

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();
  }
}