Animation only happening on one checkbox despite different classes - html

Question

I have found a checkbox which I really want to use but when I add more than 1 checkbox the animation only applies to the first one.
I have tried creating new class's like .cbx2 and .inp-cbx2 and applying the same style's but the animation still only applies to the first checkbox.
Could you please explain where I'm going wrong?
Thanks.
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx span:last-child {
padding-left: 8px;
}
.cbx:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx:checked + .cbx span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx2 {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx2 span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx2 span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx2 span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx2 span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx2 span:last-child {
padding-left: 8px;
}
.cbx2:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx2:checked + .cbx2 span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx2:checked + .cbx2 span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx2:checked + .cbx2 span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
<input class="inp-cbx" id="cbx" type="checkbox" style="display: none;"/>
<label class="cbx" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>DIRECT</span></label>
<input class="inp-cbx2" id="cbx2" type="checkbox" style="display: none;"/>
<label class="cbx2" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10" class="c">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>MUTI ROUTE</span></label>

Answer 1

The whole reason classes exist in CSS is to make your styles reusable across multiple elements. There is no need to duplicate your CSS.
The reason the second check box doesn't work when using the same classes as the first is because you haven't updated the second labels for property. This property tells the browser the id of the form element that should be effected when the label is clicked.
In your case, the second label should look like this:
<label class="cbx" for="cbx2"><span>
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx span:last-child {
padding-left: 8px;
}
.cbx:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx:checked+.cbx span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx:checked+.cbx span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx:checked+.cbx span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
<input class="inp-cbx" id="cbx" type="checkbox" style="display: none;" />
<label class="cbx" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>DIRECT</span></label>
<input class="inp-cbx" id="cbx2" type="checkbox" style="display: none;" />
<label class="cbx" for="cbx2"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10" class="c">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>MUTI ROUTE</span></label>