Jquery получает только одно динамическое входное значение вместо нескольких

Question

У меня есть скрытый вход, который динамически генерирует значения:

<input type="hidden" class="ser_id"  name="ser_id_name" value="{{ ser_id }}">

У меня также есть кнопка, которая генерируется динамически с:

 <button name="get_id_name"  class="get_id_class" id="get_id" >Get it</button>

Вход неявно генерирует следующие идентификаторы какотдельные элементы:

125-BDA-9WG
POL-548-3S6
8d4-35S-WE6

HTML-разметка элементов будет выглядеть следующим образом:

После проверки исходного кода,входные данные динамически генерируются следующим образом:

<div class="ser_ids">
      <div class="ser_input">
          <input type="text" class="ser_id"  name="ser_id_name" value="125-BDA-9WG">
          <button name="get_id_name"  class="get_id_class" id="get_id" >get ID</button>
        </div>

      <div class="ser_input">
          <input type="text" class="ser_id"  name="ser_id_name" value="POL-548-3S6">
          <button name="get_id_name"  class="get_id_class" id="get_id" >get ID</button>
        </div>

        <div class="ser_input">
          <input type="text" class="ser_id"  name="ser_id_name" value="8d4-35S-WE6">
          <button name="get_id_name"  class="get_id_class" id="get_id" >get ID</button>
        </div>
</div>

Я получаю входное значение в функции следующим образом:

  var ser_id = $('.ser_id').val();
  console.log('Ser Id : ' + ser_id);  //when I click on any of the 3 buttons, I get only the first ID logged - no matter what.

И затем я использую этот идентификатор для объединения URL-адресов в ajaxвызовите следующим образом:

  $('.get_id_class').click(function(){
    $.ajax({
               dataType: 'json', 
               url: 'API URL' + ser_id,
               contentType: "application/json; charset=utf-8",
               success: function (res) {
                 alert('JSON RESPONSE' + res.serStatus);

                 if(res.serStatus.orderId == "OK"){
                   alert('STATUS IS: is OK');
                 } else{
                   alert('STATUS IS NOT OK ');
                 }
               }
    }); 
}); 

У меня вышеупомянутый ajax-запрос, вызываемый при нажатии кнопки, который автоматически генерируется для каждого идентификатора.Другими словами, у меня есть 3 кнопки, автоматически сгенерированные для автоматически сгенерированных идентификаторов.Проблема заключается в том, что всякий раз, когда я нажимаю на любую из этих кнопок, я получаю ответ только с первым идентификатором.Конкатенация всегда связана с этим идентификатором 125-BDA-9WG, даже если я нажимаю на 2 другие кнопки.

Answer 1

Используйте .siblings(), чтобы получить ввод в том же DIV, что и кнопка.

$('.get_id_class').click(function() {
  let ser_id = $(this).siblings(".ser_id").val();
  $.ajax({
    dataType: 'json',
    url: 'API URL' + ser_id,
    contentType: "application/json; charset=utf-8",
    success: function(res) {
      alert('JSON RESPONSE' + res.serStatus);

      if (res.serStatus.orderId == "OK") {
        alert('STATUS IS: is OK');
      } else {
        alert('STATUS IS NOT OK ');
      }
    }
  });
});

Вы также можете использовать $(this).prev().val() или $(this).closest(".ser_input").find(".ser_id").val().

Кстати, идентификаторы должныбыть уникальным, вы не должны повторять id="get_id" на каждой кнопке.