Hi why wont this code work?

Hi I have done alot of vanilla JavaScript I thought of instead of having to write a code multiple times just save it into an array and call it through forEach() method but it wont work

here is the HTML

 <ul>

              <li class="dropdown" id="cart">
                <h3>cart &#x25BE;</h3>
                <ul class="dropdown-menu" id="cartMenu">
                  <li>View Cart</li>
                  <li>Saved Carts</li>
                </ul>
              </li>

              <li class="dropdown"  id="account">
                <h3>account &#x25BE;</h3>
                <ul class="dropdown-menu" id="accountMenu">
                  <li>View Account</li>
                  <li>Check Order Status</li>
                  <li>Sign in</li>
                </ul>
              </li>

              <li class="dropdown"  id="help">
                <h3>help &#x25BE;</h3>
                <ul class="dropdown-menu" id="helpMenu">
                  <li>FAQs</li>
                  <li>Return Policy</li>
                  <li>Shipping Info</li>
                </ul>
              </li> 

            </ul>

And here is the JavaScript - jQuery

$(document).ready(() => {
  const $cart = $('#cart');
  const $account = $('#account');
  const $help = $('#help');

  const $cartMenu = $('#cartMenu');
  const $accountMenu = $('#accountMenu');
  const $helpMenu = $('#helpMenu');

  const $arrayDropDown = [$cart, $account, $help];

  const $arrayMenu = [$cartMenu, $accountMenu, $helpMenu];
  
  let count = 0;
  $arrayDropDown.forEach(drop => {
    drop.on('click', () => {
      $arrayMenu[count].show();
    })
    count += 1;
  });

  $arrayMenu.forEach(menu => {
    menu.on('mouseleave', () => {
      menu.hide();
    })
  })
});

Especially this code with the array being called through the forEach() method I have spelled checked and all but if I do call them individually they work but not through the forEach() method

const $arrayDropDown = [$cart, $account, $help];

  const $arrayMenu = [$cartMenu, $accountMenu, $helpMenu];
  /// This forEach() not working why is that?
  let count = 0;
  $arrayDropDown.forEach(drop => {
    drop.on('click', () => {
      $arrayMenu[count].show();
    })
    count += 1;
  });

I don’t know much about jquery, have you tried writing a .forEach without the .on method that is jquery specific and use instead .onclick or .addEventListener("click", callback) which are simple vanilla js?