CSS popup doesn't carry PHP variable - php

Question

I'm building a website with a CSS popup inside a loop that increments by 1, but the variable $i does not carry on the popup.
CSS
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#score {
height: 380px;
min-width: 280px;
max-width: 380px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
}
#score:target,
#score:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
.popup {
position: fixed;
left: 50%;
top: 20%;
}
.popup .wrapper {
position: relative;
left: -50%;
}
PHP
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" >
</div>
</div>
</div>
The popup number $i never changes. It freezes on 1. I'm not sure what's the problem. I don't see any, but I can't make the popup number change.

Answer 1

In your codes you have repeated the score div with same id. it need to have different ids for different divs
(This will only create proper html. for popup effect it needs to use some java script/JQuery codes)
Try this
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score<?php echo $i;?>" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" > </div>
</div>
</div>
<?php $i++;}?>