popup at different position where the cursor clicks css - html

Question

Here is my code:
<div class="checkbox">
<input id="230am" type="checkbox" onclick="openPopup()"> <label for="230am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
<div class="checkbox">
<input id="3am" type="checkbox"> <label for="3am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
Below are my css:
#popupBk{
position: absolute;
width: 25%;
height: 20%;
border: 2px solid grey;
border-radius: 2px;
background-color: white;
margin-left: 3%;
box-shadow: 2px 2px 10px;
display: none;
}
So I am trying to do a calendar app. I put two popup in two checkboxes just want to do that different popup will display under each checkbox once I click. Any ideas how to do this?
i think there is a way to make each class name differently and then create its own css, but if that it might needs a huge work. Or is there any other way?
Thanks.

Answer 1

You can use the :checked state of checkboxes in CSS, coupled with the general sibling selector (~) to do this.
Read about sibling selectors here: https://css-tricks.com/child-and-sibling-selectors/
Here's a live example:
.wrapper {
float: left;
}
.hidden {
border: 1px solid #000;
display: none;
}
input[type="checkbox"]:checked ~ .hidden {
display: block;
}
<div class="wrapper">
<input type="checkbox" id="box1" /> <label for="box1">Show Box 1</label>
<div class="hidden">Box 1</div>
</div>
<div class="wrapper">
<input type="checkbox" id="box2" /> <label for="box2">Show Box 2</label>
<div class="hidden">Box 2</div>
</div>