JavaScript repetion [duplicate]

I am building a landing page, and I have a doubt.

Maybe, the question seems silly, but I want to learn how can I do this.

I built a menu, and when the user click at one of the elements of menu, I want that this menu close.

And I made it with the code of the images that I put here. How can I make this code cleaner?

const mobileItem = document.querySelector('.Item')

mobileItem.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});

const mobileItem1 = document.querySelector('.Item1')

mobileItem1.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});
const mobileItem2 = document.querySelector('.Item2')

mobileItem2.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});
const mobileItem3 = document.querySelector('.Item3')

mobileItem3.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});

<div class="container">
  <div class="logo">
    <img src="./images/LogoNewTech.png" alt="">
  </div>
  <div class="menu-toggle" id="mobile-menu">
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
  </div>

  <nav>
    <ul class="nav-list">
      <li><a href="#sobre" class="Item">Sobre nós</a></li>
      <li><a href="#produtos" class="Item1">Produtos</a></li>
      <li><a href="#servicos" class="Item2">Serviços</a></li>
      <li><a href="#contato" class="Item3">Contato</a></li>
    </ul>
  </nav>
</div>