Hey Guys I am tryting to create a popup model using the Dom and I am having some trouble

Hey I am trying to create a popup model using the Dom but my function isnt working could someone check if it is working for them or offer me some on how I could get it to work

my javascript

const objBtnPopup = document.querySelectorAll('.see-project-btn');

const popup2 = (index) => `<article class="popup">
<button type="button" class="btn-popup-close">
  <img src="Icon-Cancel.svg" alt="cancel icon" />
</button>
<div class="card-popup">
  <img src=${projects[index].url} alt="" />
</div>
<h2 class="popup-title">${projects[index].title}</h2>
<ul class="popup-tags">
 `;
for (let i = 0; i < objBtnPopup.length; i += 1) {
  objBtnPopup[i].addEventListener('click', () => {
    const overlaybig = document.createElement('div');
    overlaybig.innerHTML = popup2(i);
    document.body.appendChild(overlaybig);
    const closebtn = document.querySelector('.btn-popup-close');
    closebtn.addEventListener('click', async () => {
      document.body.removeChild(overlaybig);
    });
  });
}

I have tried different functions, that work but only to open the function but then I can't close the function. So now I am trying to write a function that opens and closes the function. And I can't think of another way to open and close the function any help would be appreciated. 

I don't know of another way to close this function because I need to wrap it in something by the DOM in order to close it. 

And as you can see I am attempting to add everything with a template literal because I want it to behave dynamically. Anything you can add would help me alot.