onclick не работает для двух или более ссылок для одной и той же функции в javascript

Question

Я просмотрел записи из базы данных MySQL. После отображения записей добавлена ​​функция javascript onclick. Он работает только для первой записи и не работает для других записей.

In the above image, I clicked the first link which works fine. But if I click second click nothing happens.

<script>
  function Confirm(title, msg, $true, $false, $link) {
    /*change*/
    var $content =
      "<div class='dialog-ovelay'>" +
      "<div class='dialog'><header>" +
      " <h3> " +
      title +
      " </h3> " +
      "<i class='fa fa-close'></i>" +
      "</header>" +
      "<div class='dialog-msg'>" +
      " <p> " +
      msg +
      " </p> " +
      "</div>" +
      "<footer>" +
      "<div class='controls' style='text-align:right'>" +
      " <button class='button button-danger doAction'>" +
      $true +
      "</button> " +
      " <button class='button button-default cancelAction'>" +
      $false +
      "</button> " +
      "</div>" +
      "</footer>" +
      "</div>" +
      "</div>";
    $("body").prepend($content);
    $(".doAction").click(function() {
      $(this)
        .parents(".dialog-ovelay")
        .fadeOut(500, function() {
          var subtotal = document.getElementById("subtotal").innerHTML;
          var price = "<?php echo $price ;?>";

          var subtotal = +subtotal + +price;
          var totalitems = document.getElementById("totalitems").innerHTML;
          var totalitems = +totalitems + +1;
          document.getElementById("totalitems").innerHTML = totalitems;
          document.getElementById("subtotal").innerHTML = subtotal.toFixed(2);
          var total = +subtotal + +8 + +4;
          document.getElementById("total").innerHTML = total.toFixed(2);
          $(this).remove();
        });
    });
    $(".cancelAction, .fa-close").click(function() {
      $(this)
        .parents(".dialog-ovelay")
        .fadeOut(500, function() {
          $(this).remove();
        });
    });
  }
  $("#linkdup").click(function() {
    Confirm(
      "Are you sure you want to Duplicate Frame",
      "One more frame will be added to Cart",
      "Yes",
      "No"
    ); /*change*/
  });
</script>

Answer 1

Здесь вы работаете с идентификаторами. Идентификатор уникален, если вы запросите его, вы получите один результат (первый).

Пример:

// This selects one
const result = document.getElementById('myId').innerHTML;
console.log(result);

// This selects all
const elements = document.querySelectorAll('[id=myId]');
elements.forEach(function(element) {
  console.log(element.innerHTML);
  // add click event to element here
});

<div id="myId">Test 1</div>
<div id="myId">Test 2</div>

Используйте для этого классы. Использование идентификатора несколько раз недопустимо, даже если вы можете заставить его работать, как показано в примере.