Как сделать несколько модальных окон?

Есть 3 кнопки:

<li class="menu-section__item">
        <button class="image-button1 modal-btn-open" type="button">
          <p class="image-button1__title">Pizza</p> 
          <div class="image-button1__text">
        </div>
      </button> 
      </li>
      <li class="menu-section__item">
        <button class="image-button2 salad-btn-open" type="button">
          <p class="image-button1__title">Салати</p> 
           <div class="image-button1__text">
        </div>
        </button> 
      </li>
      <li class="menu-section__item">
        <button class="image-button3" type="button">
          <p class="image-button1__title">Випічка</p> 
           <div class="image-button1__text">
        </div>
        </button> 
      </li>

js:

    const modal = document.querySelector(".backdrop");
const modalBtnOpen = document.querySelector(".modal-btn-open");
const modalBtnClose = document.querySelector(".modal-btn-close");

const toggleModal = () => modal.classList.toggle("is-hidden");

modalBtnOpen.addEventListener("click", toggleModal);
modalBtnClose.addEventListener("click", toggleModal);

При нажатии на 1ю - открываеться модальное окно

 <div class="backdrop is-hidden">
<div class="modal">
  <button class="modal__btn-close modal-btn-close" type="button">close</button>
  <h2>Pizza</h2>
</div>
</div>

что бы нажать на 2ю кнопку открывалось другое модальное окна, а не это же, что нужно добавить? спасибо