Get dynamically generated input value on an onClick even using Jquery

Question

I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.

I have the following code - a dynamic input and a button:

<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>

As for Jquery, I have done the following:

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

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

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

    });
});

The above code keeps generating only the first generated input value? Any ideas or suggestions?

I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.

Possible duplicate of [Access dynamically created items using jQuery?](https://stackoverflow.com/questions/12325575/access-dynamically-created-items-using-jquery) — justDan, Sep 23 '19 at 17:14
@justDan what you are referring to as a duplicate is 7 years old! A lot has changed since then. Also, upon reading what thought might be a duplicate, I can assure you it is quite the same. Thanks! — Zeusox, Sep 23 '19 at 17:17
You cannot have multiple elements with same ID. When you do that and try to read back, even in an each loop, it will always read only the first element... simply because there is supposed to be only one element. Use the class for the loop and assign a different id to each element. — Nawed Khan, Sep 23 '19 at 17:26
*When specified on HTML elements, **the id attribute value must be unique amongst all the IDs in the element's tree** and must contain at least one character.* https://html.spec.whatwg.org/multipage/dom.html#global-attributes:the-id-attribute — connexo, May 26 '21 at 21:10

score 0 · Answer 1 · edited May 26 '21 at 21:07

Add your "input tag" into 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>

Unfortunately this would show all the ids instead of showing only one ID per button click! — Zeusox, Sep 23 '19 at 22:22
*When specified on HTML elements, **the id attribute value must be unique amongst all the IDs in the element's tree** and must contain at least one character.* https://html.spec.whatwg.org/multipage/dom.html#global-attributes:the-id-attribute — connexo, May 26 '21 at 21:09

Get dynamically generated input value on an onClick even using Jquery

1 Answers1