function ModalTwo() {
  // variable
  let modalTwo = document.querySelector(".modal-container2");
  let addPreviousDate = document.querySelector(".addPreviousDate");

  // EventListener
  addPreviousDate.addEventListener("click", () => {
    // modal.classList.remove("show");
    modalTwo.classList.add("show");
  });

  window.onclick = function (event) {
    if (event.target == modalTwo) {
      modalTwo.classList.remove("show");
    }
  };
}

ModalTwo();

function ModalThree() {
  // variable
  let modalThree = document.querySelector(".modal-container3");
  let unpaidRed = document.querySelector(".unpaidRed");
  let hiddenBoxPopup = document.querySelector(".hidden-box-popup");
  let paid = document.querySelector(".paid");
  let markPaid = document.querySelectorAll("input.markPaid");

  // EventListener
  unpaidRed.addEventListener("click", () => {
    // modal.classList.remove("show");
    modalThree.classList.add("show");
  });
  
  paid.addEventListener("click", () => {
    // modal.classList.remove("show");
    modalThree.classList.remove("show");
  });

  markPaid.forEach((marks) => {
    marks.addEventListener("click", () =>{
        hiddenBoxPopup.classList.toggle("show");
      });
  });


  window.onclick = function (event) {
    if (event.target == modalThree) {
      modalThree.classList.remove(".modal-container3.show");
    }
  };
}

ModalThree();
