Styling Radio Button Breaks Functionality - html

Question

I have a Vue app with a HTML Form with multiple sets of radio buttons.
I customized their appearance using the SO answer written here
However, when I click on any of the radio buttons, only the first set of radio buttons are affected, even when clicking a different set's radio button.
This is the html and css (JSFiddle link)
Any idea why this is happening?
Update: The problem was with the label tags - their for attribute was still set to the first set of radio buttons!
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
<div class="days_open_input">
<div class="radio_group" >
<input type="radio" name="days_open" id="one_day" :value="1" v-model="days_open" checked>
<label class="radio_label" for="am">1</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="three_days" :value="3" v-model="days_open">
<label class="radio_label" for="pm">3</label>
</div>
</div>
<div class="tracks_limit_input">
<div class="radio_group">
<input type="radio" name="tracks_limit" id="eight_songs" value="8" v-model="tracks_limit" >
<label class="radio_label " for="am">8</label>
</div>
<div class="radio_group">
<input type="radio" name="tracks_limit" id="sixteen_songs" value="16" v-model="tracks_limit" checked class="tracks_limit_input__margin">
<label class="radio_label" for="pm">16</label>
</div>
</div>
/* completely hiding radio button */
input[type="radio"] {
display: none;
}
/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + *::before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 15px;
height: 15px;
padding: 3px;
margin-right: 5px;
/* background-color only for content */
background-clip: content-box;
border: 1px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance of checked radiobutton */
input[type="radio"]:checked + label::before {
background-color: black;
}
/* resetting default box-sizing */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* optional styles for centering radiobuttons */
.radio-group label {
display: inline-flex;
align-items: center;
}

Answer 1

I think there is no mistake with the css
The code you are using for the HTML is the one causes problem:
1st it is Vue code not pure HTML code
I will take the 1st group - the time example:
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
Both of inputs is set to the same model startInMorning so if it is true both checked and vice versa.
So the fix is:
first remove the v-model="startInMorning" for both
next change the :value
for the first one :value="startInMorning",
for the second one :value="!startInMorning"
Do similar for others

Answer 2

The problem seemed to be with the HTML!
The for attribute on the label tags was set to the wrong radio buttons
ie
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>