How to get the value of while loop(PHP) using JavaScript?

I have this while loop in PHP

<?php
while ($row = mysqli_fetch_assoc($getPosts)) {
  $post_id = $row['post_id'];                  


 echo "<td><a rel='$post_id' id='get_post_id' 
 onclick='active_del_modal()'>Delete</a></td>";

}   
?>    

In this loop, when we click on the “delete” link, the value of variable “$post_id” changes. I want to get the value of “$post_id” when it changes. I tried with this JS code

function active_del_modal() { 
  var x = document.getElementById("get_post_id").getAttribute("rel");
  alert(x);
}

But it only gives me the last value of “$post_id”. I want to get each value of “$post_id” when it changes and this value should be individual, not like this 23 46 545 545, etc. I don’t want to use any framework like jQuery.

Answer

• An ID must be unique in a document. So stop using static IDs in a loop.
• Links go somewhere. Don’t use a link if you aren’t navigating. Use a button if you want something to click on to trigger JS. Apply CSS if you don’t like the default appearance of a button.
• A post ID is not a type of relationship. Don’t abuse rel attributes. (Appropriate use would be something like <a href="page2.html" rel="next">) Use a data-* attribute if you need to associate custom data with an element.
• Intrinsic event attributes have a bunch of gotchas associated with them. Don’t use them. Use addEventListener and friends instead.

function active_del_modal(event) {
  const button = event.target;
  const id = button.dataset.postId;
  console.log({
    id
  });
}

document.querySelector("#delete-buttons").addEventListener("click", active_del_modal);

button {
  border: none;
  background: none;
  colour: blue;
  cursor: pointer;
}

button:hover {
  text-decoration: underline;
}

<ul id="delete-buttons">
  <li><button type="button" data-post-id="$post_id">Delete</button></li>
  <li><button type="button" data-post-id="foo">Delete</button></li>
  <li><button type="button" data-post-id="bar">Delete</button></li>
</ul>