Получить динамически сгенерированное входное значение на onClick, даже используя Jquery

Question

Я пытаюсь получить соответствующие значения динамически генерируемых входов.Другими словами, у меня есть X динамически генерируемых входов;каждый из этих входов связан с кнопкой.С учетом вышесказанного, я бы хотел, чтобы пользователь был предупрежден о динамически сгенерированном вводе, который привязан к нажатой кнопке.То, что я сделал до сих пор, не сортирует это, и какую бы кнопку ни нажимали, генерируется только значение первого ввода.

У меня есть следующий код - динамический ввод и кнопка:

<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}">  // please note this input is dynamically generated....

<button name="get_id_name"  class="get_id_class" id="get_id_id" >Show Id</button>

Что касается Jquery, я сделал следующее:

$('#get_id_id').each(function(index) {

    $(this).click(function() {
        var job_ids = $("[name='jobIdName']");

        console.log('Job Ids -------------- : ' + job_ids);

    });
});

Приведенный выше код продолжает генерировать только первое сгенерированное входное значение?Любые идеи или предложения?

Я видел некоторые посты, которые могут показаться похожими на этот, но они очень старые;также я ищу более современную реализацию.

Answer 1

Это может помочь вам:

Добавьте ваш «тег ввода» в div

var counter = 0;
$(document).ready(function(){
    $("#get_id_id").click(function() {
        var divChildren = $(".job_ids").children();
        if(counter < divChildren.length){
          if(counter == '0'){
             console.log($(divChildren).eq(0).val());
          }else{
            console.log($(divChildren).eq(counter).val());
          }
          counter++;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="job_ids">
        <input type="hidden"  name="jobIdName" value="Test01">  
        <input type="hidden"  name="jobIdName" value="Test02">  
        <input type="hidden"  name="jobIdName" value="Test03">  
        <input type="hidden"  name="jobIdName" value="Test04">  
        <input type="hidden"  name="jobIdName" value="Test05">  
    </div>
    <button name="get_id_name"  class="get_id_class" id="get_id_id" >Show Id</button>