Radio button group selection changing another group instead of current group

Question

I'm having a problem styling radio buttons as a 4 option slider. I can get it to work with one, but not with multiple sliders. Apologies if I'm missing something obvious, think I'm going code blind here.

When more than one group of radio buttons are used, when you click on the 2nd, 3rd, etc, group, only the first group keeps changing, instead of the actual group that was changed.

I can fix it by hard-coding Ids i.e. am-1, am-2, etc, but that means writing css for up to a fixed quantity. I'm looking to try and make it without limits if it's possible.

There's other css, but this is the selection part of it:

.switch-four-stage .switch-input:checked + switch-label
{
  /* Styling */
  font-weight: bold;
  color: rgba(255, 255, 255, 1.00);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -ms-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  -webkit-transition-property: color, text-shadow;
  -moz-transition-property: color, text-shadow;
  -ms-transition-property: color, text-shadow;
  -o-transition-property: color, text-shadow;
}
.switch-four-stage .switch-input:checked + .switch-label-am ~ .switch-selection
{
  left: 0px;
}
.switch-four-stage .switch-input:checked + .switch-label-all ~ .switch-selection {
  left: 60px;
}
.switch-four-stage .switch-input:checked + .switch-label-pm ~ .switch-selection {
  left: 120px;
}
.switch-four-stage .switch-input:checked + .switch-label-na ~ .switch-selection {
  left: 180px;
}

Then this is the markup:

<section style="float: left;">Day 1</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day1" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day1" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day1" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day1" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 2</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day2" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day2" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day2" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day2" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 3</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day3" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day3" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day3" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day3" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>

I've also included a screenshot of the output: Multiple slider output

Wondering if anyone has any suggestions? I hope this makes sense, if not I'll try and clarify it better if possible.

Many thanks in advance.

Answer 1

Check now i changed values of ids and for of different input and label. checked in local working fine.

<html>
        <head>
            <style>
                .switch-four-stage .switch-input:checked + switch-label
                {
                  /* Styling */
                  font-weight: bold;
                  color: rgba(255, 255, 255, 1.00);
                  -webkit-transition: 0.15s ease-out;
                  -moz-transition: 0.15s ease-out;
                  -ms-transition: 0.15s ease-out;
                  -o-transition: 0.15s ease-out;
                  -webkit-transition-property: color, text-shadow;
                  -moz-transition-property: color, text-shadow;
                  -ms-transition-property: color, text-shadow;
                  -o-transition-property: color, text-shadow;
                }
                .switch-four-stage .switch-input:checked + .switch-label-am ~ .switch-selection
                {
                  left: 0px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-all ~ .switch-selection {
                  left: 60px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-pm ~ .switch-selection {
                  left: 120px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-na ~ .switch-selection {
                  left: 180px;
                }   
            </style>
        </head>
        <body>
            <section style="float: left;">Day 1</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am" name="day1" value="1" checked>
                    <label for="am" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all" name="day1" value="2">
                    <label for="all" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm" name="day1" value="3">
                    <label for="pm" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na" name="day1" value="4">
                    <label for="na" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
            <section style="float: left;">Day 2</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am1" name="day2" value="1" checked>
                    <label for="am1" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all1" name="day2" value="2">
                    <label for="all1" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm1" name="day2" value="3">
                    <label for="pm1" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na1" name="day2" value="4">
                    <label for="na1" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
            <section style="float: left;">Day 3</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am2" name="day3" value="1" checked>
                    <label for="am2" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all2" name="day3" value="2">
                    <label for="all2" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm2" name="day3" value="3">
                    <label for="pm2" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na2" name="day3" value="4">
                    <label for="na2" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
        </body>
    </html>

Answer 2

You cannot use the same ID again on the same page. IDs should be unique with a HTML document. Try changing the IDs of the second and third groups of radio buttons, e.g:

<div class="switch switch-pink">
    <input type="radio" class="switch-input" id="am-2" name="day2" value="1" checked>
    <label for="am-2" class="switch-label switch-label-am">AM</label>
    <input type="radio" class="switch-input" id="all-2" name="day2" value="2">
    <label for="all-2" class="switch-label switch-label-all">ALL</label>
    <input type="radio" class="switch-input" id="pm-2" name="day2" value="3">
    <label for="pm-2" class="switch-label switch-label-pm">PM</label>
    <input type="radio" class="switch-input" id="na-2" name="day2" value="4">
    <label for="na-2" class="switch-label switch-label-na">N/A</label>
    <span class="switch-selection"></span>
</div>