라디오 버튼 그룹 선택으로 현재 그룹 대신 다른 그룹 변경

라디오 버튼을 4 가지 옵션 슬라이더로 스타일링하는 데 문제가 있습니다. 하나는 작동하지만 여러 슬라이더로는 작동하지 않습니다. 명백한 것을 놓치고 있다면 사과드립니다. 여기서 코드 블라인드가 될 것 같습니다.

두 개 이상의 라디오 버튼 그룹을 사용하는 경우 두 번째, 세 번째 등의 그룹을 클릭하면 변경된 실제 그룹 대신 첫 번째 그룹 만 계속 변경됩니다.

am-1, am-2 등과 같은 Ids를 하드 코딩하여 수정할 수 있지만 이는 최대 고정 수량에 대한 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>

또한 출력 스크린 샷도 포함했습니다. 다중 슬라이더 출력

누구에게 제안이 있는지 궁금하십니까? 이것이 의미가 있기를 바랍니다. 그렇지 않다면 가능하면 더 잘 설명하겠습니다.

미리 감사드립니다.