Clicking checkbox always checks the first checkbox element

I have duplicated some designed checkboxes and the problem is when I click the second checkbox the first checkbox gets checked instead of the right one.

Here is the fiddle link: fiddle link for the chckbox

Here is the css:

label, input[type="radio"], input[type="checkbox"] {
    line-height: 2.1ex;
}

input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    position: relative;
    cursor: pointer;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    vertical-align: -20%;
    height: 21px;
    width: 21px;
    background-color: #fff;
    border: 2px solid #b7cbd9;
    border-radius: 4px;
    margin-right: .5em;
}

input[type="radio"]:checked + label::before {
    background: radial-gradient(circle at center, #8da8ba .6ex, white .7ex);
}

input[type="radio"] + label::before {
    border-radius: 50%;
}

input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    height: 6px;
    width: 11px;
    background: transparent;
    top: 3px;
    left: 5px;
    border: 3px solid #b7cbd9;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}