Checkbox that expands inside Wordpress Loop - php

Question

I have created my own style for my Wordpress loop, which displays images for the 10 most recent post in a Bootstrap scaffold.
Each image has a label you can click to expand information. However, no matter which checkbox you click, it will only open and close the first post in the loop.
I have tried assigning li and child li values to the css and moving the checkbox label further into the loop. Nothing helped as of yet. I'm sure this has something to do with the fact that, since it's in the loop, I can't assign each checkbox to a specific post. There is only one [for="check"]
Is this checkbox idea feasible?
HTML:
<li class="<?php echo $span; ?>">
<?php
echo '<div class="postexpander"><label for="check"><div class="postarrow"> <p>Expand Info <span class="glyphicon glyphicon-plus"></span></p></div></label>';
echo '<input id="check" type="checkbox">';
echo '<div class="posttext" onclick="posttext:hover">';
echo '<p class="posthead">';
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
the_title();
echo '</a>';
echo '</p><p class="postdate">';
the_date('F jS, Y');
echo '</p><p class="postcontent">';
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 15,"...".'<p class="readmore"> Read More' );
echo $trimmed_content;
echo '</p>';
echo '</div></div>';
if(has_post_thumbnail()) {
$image_src = the_post_thumbnail( 'custom-size', array( 'class' => "postimage" ) );
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo '</a>';}?>
</li>
<?php
//End the post loop
endwhile; else:
?>
CSS:
.postroll .col-md-6 img {
max-height:400px;
min-width: 200px;
margin: -5px 0px -5px 0px;
}
.postroll .col-md-3 img {
max-height:200px;
min-width: 100px;
}
.col-md-6 {
padding: 0px !important;
}
.row {
clear: both;}
.postimage {
text-decoration: none;
opacity:.5;
width: 100%;
height: auto;
padding: 5px 0 5px 0;
filter: grayscale(50%);
}
.postexpander {
opacity:1;
position: absolute;
width: 100%;
height: 100%;
text-align: right;
z-index: 5;
}
.postexpander:hover ~ .postimage {
opacity: 1;
filter: grayscale(0%);
webkit-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
-moz-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
}
.posttext {
opacity:0;
width: 0px;
height: 100%;
margin-left: 100%;
top:0;
overflow:hidden;
position: absolute;
background:rgba(255,255,255,0.95); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
z-index: 1;
}
.postroll input {
display: none;
}
.postarrow {
font-size: 12px;
text-align: center;
padding: 5px;
width: 40px;
height: 100%;
text-align: right;
margin-left: 90%;
background-color: rgba(51, 68, 122, 1);
border-left: 3px solid #13EBC7;
float: right;
display:block;
}
.postarrow p{
color:white;
font-size: 100%;
width: 120px;
height:20px;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-transform-origin: 50% 270%; /* IE 9 */
-webkit-transform-origin: 50% 270%; /* Chrome, Safari, Opera */
transform-origin: 50% 270%;
}
.postroll label:hover .postarrow {
background: #3498db;
}
input:checked + .posttext {
opacity:1;
width:100%;
margin-left:0%;
}
.posthead {
color: #0587F2;
font-size: 200%;
font-weight: bolder;
float:left;
text-align:right;
margin-top: -2px;
padding: 5px;
width: 60%;
height: 100%;
vertical-align: top;
display: block;
overflow: hidden;
border-right: 3px solid #13EBC7;
z-index:2;
}
.postdate{
color:#5C5C5C;
float: right;
font-style: italic;
text-align: left;
width: 40%;
height: 30%;
vertical-align: top;
padding: 10px 25px 10px 5px;
}
.postcontent{
margin-top: -20px;
padding: 10px 25px 10px 5px;
float: right;
color:#8A8A8A;
text-align: left;
width: 40%;
height: 70%;
}
.readmore {
visibility: hidden;
float: right;
text-align: right;
vertical-align: text-bottom;
vertical-align: bottom;
}
.postarrow, .posttext, .posthead, .postimage, .readmore,
.postroll input, input:checked + .posttext, input .posttext, .postarrow, label:hover .postarrow
{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
In the image you can see that, even though I click on the info tab (light blue on hover) it expands the text on the post above it:
http://bit.ly/1CYkYjd

Answer 1

Okay, I figured it out! So so so simple.
Instead of:
<label for="check">
<input id="check" type="checkbox">
I had to use:
<label for="'.get_the_ID().'">
<input id="'.get_the_ID().'" type="checkbox">
That way, like I was thinking earlier, each post's checkbox is given an individual value and they can all operate simultaneously.