Multiple checkbox with same id in row and one needs to be selected

I'm trying to add a popup block which will work differently for each row. I used same checkbox id to work with CSS. But it always checks the first option. As a result, the first option in the list get deleted (as I'm working with delete button) instead of the selected one

This is my HTML part :

                {% for item in items %}
                <input type="checkbox" id="popup">
                <label for="popup" class="del_btn">Delete</label>
                
                <div class="popup-content">
                    <div class="pop-header">
                        <h2>Confirm deletion?</h2>
                        <label for="popup" class="fa fa-times"></label>
                    </div>
                    <label for="popup" class="fa fa-exclamation"></label>
                    <p>Once deleted, all data related to it can't be restored again.<br>Proceed to delete?</p>
                    <div class="line"></div>
                    <a href="{% url 'delete_item' item.id %}" class="btn btn-danger btn-sm" role="button">
                        <i class="fa fa-trash"></i>
                        <span>Delete</span>
                    </a>
                    <label for="popup" class="close-btn">Cancel</label>
                </div> 

And my CSS part :

                .popup-content
                {
                   top: 50%;
                   left: 50%;
                   opacity: 0;
                   visibility: hidden;
                   transform: translate(-50%, -50%);
                   position: fixed;
                   width: 450px;
                   height: 350px;
                   transition: 0.3s ease-in;
                   background-color: khaki;
                   border-radius: 3px;
                   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
                }

                /* #popup
                {
                   display: none;
                } */

                #popup:checked ~ .popup-content
                {
                   opacity: 1;
                   visibility: visible;
                }

                .pop-header
                {
                   height: 90px;
                   background-color: #27AE60;
                   overflow: hidden;
                   border-radius: 3px 3px 0 0;
                   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
                }

                .pop-header h2
                {
                   font-size: 40px;
                   line-height: 45px;
                   color: white;
                   font-weight: normal;
                }

                .popup-content p
                {
                   font-size: 16px;
                   color: red;
                   text-align: center;
                }

                .line
                {
                   position: absolute;
                   bottom: 60px;
                   height: 1px;
                   width: 100%;
                   background-color: black;
                }

                .fa-times
                {
                   position: absolute;
                   right: 20px;
                   top: 35px;
                   color: #E8F7FC;
                   font-size: 20px;
                   font-weight: bold;
                   cursor: pointer;
                }

                .fa-exclamation
                {
                   font-size: 50px;
                   color: #27AE60;
                   height: 80px;
                   width: 80px;
                   text-align: center;
                   border: 2px solid #27AE60;
                   border-radius: 50%;
                   box-sizing: border-box;
                   padding-top: 13px;
                   margin: 30px 0;
                }

                .del_btn
                {
                   font-size: inherit;
                   display: block;
                   width: 62.36px;
                   height: 33px;
                   line-height: 33px;
                   background: #d9534f;
                   border: 1px solid #d9534f;
                   border-radius: 3px;
                   cursor: pointer;
                   transition: 0.5s;
                }

                .del_btn:hover
                {
                    background: red;
                }

                .close-btn
                {
                    position: absolute;
                    bottom: 2.5px;
                    right: 10px;
                    font-size: 18px;
                    color: #27AE60;
                    border: 1px solid #27AE60;
                    border-radius: 3px;
                    padding: 8px 10px;
                    cursor: pointer;
                }

                .close-btn:hover
                {
                    background-color: #27AE60;
                    color: khaki;
                    transition-delay: 0.1s;
                }

                .popup-content .btn-danger
                {
                    position: absolute;
                    bottom: 6px;
                    right: 100px;
                    font-size: 18px;
                    padding: 8px 10px;
                }

I also tried

                <input type="checkbox" id="popup popup_{{item.id}}>

It successfully creates dynamically different id for different row, but CSS doesn't work in that case.