单选按钮组选择更改了另一个组而不是当前组

我在将单选按钮设置为4选项滑块时遇到问题。我可以使用它，但不能使用多个滑块。抱歉，如果我缺少明显的内容，请以为我在这里使代码盲目。

当使用多个单选按钮组时，单击第二，第三等组时，只有第一个组保持更改，而不是实际更改的组。

我可以通过对ID（即am-1，am-2等）进行硬编码来解决此问题，但这意味着要写一个固定数量的css。我正在尝试尝试并尽可能做到无限制。

还有其他的CSS，但这是其中的选择部分：

.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;
}

然后是标记：

<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>

我还提供了输出的屏幕截图：多个滑块输出

想知道是否有人有任何建议吗？我希望这是有道理的，如果可能的话，我会尽力加以澄清。

提前谢谢了。