我如何在这里关闭我的覆盖模式框，它不起作用

Question

I cant close my overlay modal Box.I try when the x is clicked than remove the class list,than the modal-box should be closed,but it is not recognized by js and css.First i have one ovarlay where should be showed the name and the position of the coas,after that when the user clicks on the arrow the modal box pop up in full width and height and that'sworks correct and after that i have one X span @times where when i click on the X i want the mdoal box to be disapered.I tried with addevent listener and everything itdoesnt work.

JS CODE

const makingTheInstructorSection = (arrInst) => {
  for(let coach of arrInst) {
    $('.instructorBoxes').append
    (`
    <div class="infoPerInstructor">
      <img src="ImageGalleryPictures/instructor.jpg"/>

        <div class="firstOverlay">   
        <p class="arrowPointerInstructor">&#8594;</p> 
            <div class="text">
            <p class="arrowPointerInstructor">&#8594;</p> 
                <h3>${coach.name}</h3>
                <p>${coach.position}</p>
            </div>
        </div>

        <div class="secondOverlayOnClick">
        <span class="closeTheInstructorBox">&times;</span>   
                <h5>Why you coach:</h5>
                <p>${coach.WhyYouCoach}</p> 

                <h5>Favorite Movement:</h5>
                <p>${coach.favoriteMovement}</p> 

                <h5>Favorite Quote:</h5>
                <p>${coach.favoriteQuote}</p>    
        </div> 

    </div>
  `)
  }
}

// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console 
// when i click that x in the browser

for(let item of closing) {
  item.addEventListener("click" , (e) => {
    console.log(e.target);
  })
}

THE CSS CODE

.instructorBoxes {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  grid-gap: 8px;
}

.instructorBoxes > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instructorBoxes div {
  width: 100%;
  height: 100%;
}


.infoPerInstructor {
  position: relative;
  width: 50%;
}


.image {
  display: block;
  width: 100%;
  height: auto;
}

.firstOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-color: #008CBA; */
  background-color: #570194;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
  cursor: pointer;
  z-index:1;
}

.infoPerInstructor:hover .firstOverlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.arrowPointerInstructor {
    float: right;
    font-size: 50px;
    color: white;
}


.secondOverlayOnClick  {
  display: none;
}

.activeteTheSecondOverlayOnClick {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
  display: block;
}

/* .DEactiveteTheSecondOverlayOnClick {
  display: none;
} */

.activeteTheSecondOverlayOnClick p , h1 {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

  .closeTheInstructorBox {
    font-size: 30px;
    color: red;
    cursor: pointer;
    float: right;
    right: 0;
    z-index: 100;
  }

Answer 1

I found an answer.Because it is overlay it does not work,the best way to do is to make add event listener on body,and then check

if some event target contains that specific class list,then it will be found,and throught that event can you search the "modal box" depending on the structure on your html and remove some class list etc...

body.addEventListener("click" , (e) => {
  if(e.target.classList.contains("closeTheInstructorBox")) {
    console.log("x e ");
    console.log(e.target.parentElement)
    e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
  }