Star rating system: CSS works on only one instance

Question

I have a star rating system.

The HTML Part is added via php in a foreach and comes in a gallery of images to add the rating system. I took this code for example in the real code I set checked via jQuery with the DB_result works fine but only one of 20 images get the stars shown

How can I fix that? In total there are 5000 images added via pagination

PhP part is like this:

foreach ($xxx AS $X){
//cake php simply echo the file where the inputfields are in
echo $this->Element('../Candidates/Elements/rating_display')

}

 // for the number 2 comes the php variable $(".vote[value='2']").attr("checked", true); 

 .rating { float:left; } /* :not(:checked) is a filter, so that browsers that don't support :checked don't follow these rules. Every browser that supports :checked also supports :not(), so it doesn't make the test unnecessarily selective */ .rating:not(:checked) > input { position:absolute; top:-9999px; clip:rect(0,0,0,0); } .rating:not(:checked) > label { float:right; width:1em; padding:0 .1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:200%; line-height:1.2; color:#ddd; text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); } .rating:not(:checked) > label:before { content: '★ '; } .rating > input:checked ~ label { color: #f70; text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: gold; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: #ea0; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); } .rating > label:active { position:relative; top:2px; left:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset class="rating"> <legend>Please rate:</legend> <input type="radio" id="star5" name="rating" value="5" class="vote"/><label for="star5" title="Rocks!">5 stars</label> <input type="radio" id="star4" name="rating" value="4" class="vote" /><label for="star4" title="Pretty good">4 stars</label> <input type="radio" id="star3" name="rating" value="3" class="vote"/><label for="star3" title="Meh">3 stars</label> <input type="radio" id="star2" name="rating" value="2" class="vote"/><label for="star2" title="Kinda bad">2 stars</label> <input type="radio" id="star1" name="rating" value="1" class="vote"/><label for="star1" title="Sucks big time">1 star</label> </fieldset> <fieldset class="rating"> <legend>Please rate:</legend> <input type="radio" id="star5" name="rating" value="5" class="vote"/><label for="star5" title="Rocks!">5 stars</label> <input type="radio" id="star4" name="rating" value="4" class="vote" /><label for="star4" title="Pretty good">4 stars</label> <input type="radio" id="star3" name="rating" value="3" class="vote"/><label for="star3" title="Meh">3 stars</label> <input type="radio" id="star2" name="rating" value="2" class="vote"/><label for="star2" title="Kinda bad">2 stars</label> <input type="radio" id="star1" name="rating" value="1" class="vote"/><label for="star1" title="Sucks big time">1 star</label> </fieldset> 

Answer 1

it is working only for one instance, because of the duplicate ids on inputs. Make them unique - ALWAYS :)

Answer 2

Eduard is quite right. You should find a way to make each set of stars unique. This should be done by the php. Cake is not my piece of cake (sorry for that)

But it looks to me as if you could do it this way:

$i=1;
foreach ($xxx AS $X){
//cake php simply echo the file where the inputfields are in
echo $this->Element('../Candidates/Elements/rating_display', array(
"i" => $i
));
$i++;
}

(I looked over here: http://book.cakephp.org/2.0/en/views.html )

In your file with the input files, you could add $i, to make each block unique. Something like this:

<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="<?=$i?>star5" name="rating" value="5" class="vote"/><label for="<?=$i?>star5" title="Rocks!">5 stars</label>
<input type="radio" id="<?=$i?>star4" name="rating" value="4" class="vote"/><label for="<?=$i?>star4" title="Pretty good">4 stars</label>
<input type="radio" id="<?=$i?>star3" name="rating" value="3" class="vote"/><label for="<?=$i?>star3" title="Meh">3 stars</label>
<input type="radio" id="<?=$i?>star2" name="rating" value="2" class="vote"/><label for="<?=$i?>star2" title="Kinda bad">2 stars</label>
<input type="radio" id="<?=$i?>star1" name="rating" value="1" class="vote"/><label for="<?=$i?>star1" title="Sucks big time">1 star</label>

I hope this helps you.