Как получить ближайший указанный c ID при нажатии кнопки

Question

Я пытаюсь получить mesg_id, когда пользователь нажимает на кнопку, на ней отображается всплывающее окно, а внутри него отображается mesg_id

, но проблема в том, что у меня возникла не то, что я mesg_id не может извлечь то, что он берет сверху, а не тот, который пользователь нажимает на примере:

<div class="msg-action">
    <p id="mesg_id"><?php echo $msg_id; ?></p>
    <a class="msg-icon popup-button"  href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
    <a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>

Это скрипт, который показывает всплывающее окно при нажатии на ответ, и принимает mesg_id

/* modle-popup*/

jQuery(document).ready(function(){


    jQuery(".popup-button").click(function(){
      event.preventDefault();
      jQuery("body").addClass("sitemodal-open");
      jQuery(".sitemodal").addClass("in");
      var textareaValue = $('#mesg_id').html();
      document.getElementById("showMesgID").innerHTML = textareaValue;
    });

    jQuery('.sitemodal .sitemodal-dialog').click(function($){
       $.stopPropagation();
    });

    jQuery(".close-popup ,.sitemodal").click(function(){
      jQuery("body").removeClass("sitemodal-open");
      jQuery(".sitemodal").removeClass("in");
      document.getElementById("showMesgID").innerHTML = "";
    });
});

как я могу получить mesg_id тот, на который пользователь нажимает, а не тот сверху

Answer 1

Нельзя использовать ID для нескольких элементов. Идентификатор должен быть уникальным для каждого элемента. Вам нужно использовать класс вместо. а затем используйте closest () и find (), чтобы получить значение из элемента в том же модале.

Html:

<div class="msg-action">
    <p class="mesg_id"><?php echo $msg_id; ?></p>
    <a class="msg-icon popup-button"  href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
    <a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>

Javascript:

jQuery(".popup-button").click(function(){
      event.preventDefault();
      jQuery("body").addClass("sitemodal-open");
      jQuery(".sitemodal").addClass("in");
      var textareaValue = $(this).closest('.msg-action').find('.mesg_id').html();
      document.getElementById("showMesgID").innerHTML = textareaValue;
    });

Answer 2

Вы можете использовать ID в элементе только один раз на страницу.

<div id="myid">testing</div>
<div id="myid">testing 2</div>

Первый элемент имеет прецедент, потому что это был первый элемент с этим ID. Вам необходимо назначить каждому элементу свой уникальный идентификатор.