Only one value from an hidden input is being displayed - php

Question

<?php
foreach($_color_swatch as $_inner_option_id){
preg_match_all('/((#?[A-Za-z0-9]+))/', $_option_vals[$_inner_option_id]['internal_label'], $matches);
if ( count($matches[0]) > 0 ) {
$color_value = $matches[1][count($matches[0])-1];
?>
<li>
<input type="hidden" id="fakecolor" value="<?php echo $color_value;?>"/>
<div onclick="alert(document.getElementById('fakecolor').value);">
<img src="<?php echo $color_value;?>.png" /></div>
</li>
<?php
}
}
?>
This works for displaying the images, using the $color_value but i need to pass the value from hidden input to another javascript function.
And when i click on div it displays only one value no matter how many are inside the foreach.
Can anyone give me a little help? Thanks.
This is the output:
<li>
<input type="hidden" id="fakecolor" value="red"/>
<div onclick="alert(document.getElementById('fakecolor').value);"><img src="red.png"/></div>
</li>
<li>
<input type="hidden" id="fakecolor" value="blue"/>
<div onclick="alert(document.getElementById('fakecolor').value);"><img src="blue.png"/></div>
</li>
<li>
<input type="hidden" id="fakecolor" value="white"/>
<div onclick="alert(document.getElementById('fakecolor').value);"><img src="white.png"/></div>
</li>
<li>
<input type="hidden" id="fakecolor" value="green"/>
<div onclick="alert(document.getElementById('fakecolorx').value);"><img src="green.png"/></div>
</li>
But when i click on each of the divs, it displays only the value of the second, blue.

Answer 1

Try something like this:
<?php
$cont = 0;
foreach($_color_swatch as $_inner_option_id){
preg_match_all('/((#?[A-Za-z0-9]+))/', $_option_vals[$_inner_option_id]['internal_label'], $matches);
if ( count($matches[0]) > 0 ) {
$color_value = $matches[1][count($matches[0])-1];
?>
<li>
<input type="hidden" id="fakecolor<?php echo $cont; ?>" value="<?php echo $color_value;?>"/>
<div onclick="alert(document.getElementById('fakecolor<?php echo $cont; ?>').value);">
<img src="<?php echo $color_value;?>.png" /></div>
</li>
<?php
}
$cont = $cont + 1;
}
?>
In this way every input hidden have a different id, the same whit the onclick function.
Saludos ;)

Answer 2

I dont quite understand what you're trying to do, still:
<input type="hidden" id="fakecolor" value="<?php echo $color_value;?>"/>
<div onclick="alert(document.getElementById('fakevalue').value);">
First line: you're using an unique id while looping so you'll get several elements with the same id and you'll always end up with the first one with document.getElementById.
Second line: aren't you supposed to get the value of the hidden field ? (ie #fakecolor and not #fakevalue as you're getting).

Answer 3

You have multiple IDs on the same page which will cause getElementById to fail. Why don't you loop and construct your JavaScript like so:
<div onclick="alert("<?php echo $color_value; ?>");">
If you ever move from just alert you can have whatever JavaScript function with a string parameter to accept the color value.