Pop up CSS is Link together - php

Question

This is the html code for the POPUP. If I print this out in a foreach function then when I press the another popup that is create from the function the css will be link together so no matter which CSS I press it will only pop up the data for the first POPUP and the second pop up will stay the same. This is what I made:
So if I press the POPUP from course 1 then the pop up will works but if I press the POPUP from Couse 2 then the POPUP from Couse 1 will pop out instate of the course 2 popup the I pressed. Is there any way to make the css individual by calling out them one by one with foreach function because the number of the course is no specific sometime have more and sometime have less so is there any way to make every popup individual for each course.
<input type="checkbox" id="show" />
<label for="show" class="show-btn"> Join Meeting </label>
<div class="container-attendence">
<label for="show" class="close-btn fas fa-times" title="close"></label>
<div class="text">Attendence Detail</div>
</div>
This is the CSS code
.show-btn{
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
input[type="checkbox"]{
display: none;
}
.container-attendence{
display: none;
background: #fff;
width: auto;
padding: 30px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .show-btn{
display: none;
}
#show:checked ~ .container-attendence{
display: block;
}
.container-attendence .close-btn{
font-size: 18px;
cursor: pointer;
}
.container-attendence .close-btn:hover{
color: #3498db;
}
.container-attendence .text{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container-attendence form{
margin-top: -20px;
}
.container-attendence form .data{
height: auto;
width: 100%;
margin: 40px 0;
}
form .data label{
font-size: 18px;
}
.Attendence-btn{
background:none;
border:none;
}