Multiple checkbox image replacement - only effecting first row of checkboxes - html

Question

I am trying to replace checkboxes with images. I got the inputs hidden and the images shown using the label for the checkboxes, but when I click any of the checkboxes it only updates the first row of checkboxes. What am I doing wrong?
HTML:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
</form>
CSS:
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png');
}
input[type="checkbox"]:checked + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png');
}
Fiddle:
http://jsfiddle.net/D351GN3R/8jW43/
Any help would be greatly appreciated. I have no idea what's going on here!

Answer 1

The problem is that your label elements are looking for the id you tied them to and you have the same IDs for each row. You need unique ids for each checkbox and to match the for on each label like so:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin2">
<label for="make-admin2"></label>
<input type="checkbox" id="remove-member2">
<label for="remove-member2"></label>
</div>
<div>
<input type="checkbox" id="make-admin3">
<label for="make-admin3"></label>
<input type="checkbox" id="remove-member3">
<label for="remove-member3"></label>
</div>
</form>
fiddle: http://jsfiddle.net/EWpLq/