jquery получить значение элемента

Question

это мой код, который создает 10 элементов формы с помощью кнопки «Удалить»

<?php

for ($i = 0; $i < 10; $i++) { ?>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="<? echo $i; ?>" />
</form>
<? } ?>

Мне нужно знать, какая кнопка была нажата, чтобы получить значение «MyID» Я знаю это jquery Функция onclick:

$( ".button" ).click(function() {
  alert("Button clicked);
  $(".MyID").val(); // THE ID
});

Но поле ввода с «MyID» существует 10 раз. Код не может работать так. Как я могу это понять?

Answer 1

<a class="button" data-id="<? echo $i; ?>">Delete</a>

Затем получите доступ к нему с помощью метода data('id').

Answer 2

Вы можете получить его, используя следующий код

$( ".button" ).click(function() {
   alert($(this).closest('form').find('input[name$="MyID"]').val()); // THE ID
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="1" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="2" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="3" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="4" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="5" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="6" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="7" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="8" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="9" />
</form>
<form action="xxx" method="post">
   <div>
      <a class="button">Delete</a>
   </div>

    <input type="hidden" name="MyID" value="10" />
</form>