Jquery getting list of values of hidden inputs within a div

Question

I am trying to get a list of values within a div that I will format later using the .each() method. They are input values which are hidden my html and jquery call looks like this.

<div id="container_0">
   <input type="hidden" id="check_data" value=10>
   <input type="hidden" id="check_data" value=20>
</div>

Jquery:

var list = $('#container_0 input#check_data');

$(list).each(
      function() {
           alert($(this).val());
       }
);

This however is not returning any values. Any help would be greatly appreciated.

Answer 1

You can't use the same ID multiple times, this is invalid HTML. When you do this, any results will be unpredictable, especially across browsers.

This should work to alert the values though:

$('#container_0 input').each(function() {
   alert($(this).val());
});

If you used a class, like this:

<div id="container_0">
   <input type="hidden" class="check_data" value=10>
   <input type="hidden" class="check_data" value=20>
</div>

Then this would find only those inputs:

$('#container_0 input.check_data').each(function() {
   alert($(this).val());
});

Answer 2

Nick is completly right, you are not allowed to use id's more than once within one html document.

What could help you is: choose different id's for your inputs

Then select the two inputs by something like:

 $('#container_0 input')

In case that matches too many elements, you still can add classes to the inputs:

<div id="container_0">
   <input class="fencyInput" />
   <input class="fencyInput" />
   <input class="notFancy" />
</div>

Where a selector like

 $('#container_0 input.fencyInput')

would only match the first two divs (classes can be used more than once).