How can ı make popup for every boxes with javascript

Question

Hi ı am trying make a popup div. I have 3 boxes and ı want which one ı click it should open and for an example 2. div has a "try2" letter when ı click 2. div popup must be opened and ı have to see the "try2" samething also applies to others

I wrote a few couple codes. But ı couldn't get what ı want. I have one problem. I want to when ı click first div ı have to see on the popup "try" when ı click 2. div ı have to see "try2" and when ı click 3. div ı have to see"try3" here is the photos and codes not opened popup opened popup

const popup = document.querySelector('.popup');
const noktablock = document.querySelector(".nokta");
const nokta = document.querySelector("h2");
const h1 = document.querySelector('#h1');

function getir() {
  popup.style.display = "block";
  noktablock.style.display = "none";

  h1.innerHTML = nokta.innerHTML;
}

.nokta {
  background-color: aqua;
  width: 200px;
  height: 200px;
}

.popup {
  width: 100%;
  height: 500px;
  background-color: black;
  display: none;
}

.popup h1, h3 {
  color: white;
}

<div class="popup">
  <h1 id="h1"></h1>
  <h3 id="h3"></h3>
</div>

<div class="nokta" onclick="getir()">
  <h2 id="h2">TRY1</h2>
  <h4 id="h4">TRY1</h4>
</div>

<div class="nokta" onclick="getir()">
  <h2 id="h2">TRY2</h2>
  <h4 id="h4">TRY2</h4>
</div>

<div class="nokta" onclick="getir()">
  <h2 id="h2">TRY3</h2>
  <h4 id="h4">TRY3</h4>
</div>

Answer 1

• Don't use duplicated IDs.
• Don't use inline HTML on* handlers like onclick. Use addEventListtener() instead
• Keep track of the active .box in a variable like elBoxActive
• You can transfer the contents using elPopup.innerHTML = elBox.innerHTML
• Don't (or at least avoid) to use .style in JS. Instead use Element.classList and its methods like .add() .remove() .toggle()

const elPopup = document.querySelector(".popup");
const elsBoxes = document.querySelectorAll(".box");
let elBoxActive;

const toPopup = (elBox) => {
  if (elBoxActive) {
    elBoxActive.classList.remove("is-hidden");
  }
  elBoxActive = elBox;
  
  elPopup.innerHTML = elBox.innerHTML;
  
  elBox.classList.add("is-hidden");
  elPopup.classList.add("is-visible");
};

elsBoxes.forEach(elBox => {
  elBox.addEventListener("click", toPopup.bind(null, elBox));
});

* { margin: 0; box-sizing: border-box; }

.popup {
  padding: 1rem;
  margin: 0.5rem;
  background-color: #222;
  color: white;
  display: none; /* invisible by default */
}

.popup.is-visible {
  display: block; /* visible on a .box click */
}

.box {
  padding: 1rem;
  margin: 0.5rem;
  background-color: aqua;
  width: 100px;
  cursor: pointer;
}

.box.is-hidden {
  display: none; /* invisible when clicked */
}

<div class="popup"></div>

<div class="box">
  <h2>TRY1</h2>
  <h4>TRY1</h4>
</div>

<div class="box">
  <h2>TRY2</h2>
  <h4>TRY2</h4>
</div>

<div class="box">
  <h2>TRY3</h2>
  <h4>TRY3</h4>
</div>