Проблема Javascript и HTML

---

Я планирую создать часы, которые будут показывать, когда каждый период времени активен. Проблема в том, что пользователь должен иметь возможность выбрать расписание, но вместо того, чтобы перечислить это соответствующее расписание, он пропускает другие периоды.
Код - Pastebin.com[^]

<style>
    .inv {
        display:none;
    }
   p {
        margin:0;
    }
</style>
<input type="checkbox" id="Timea">Time Set (a)
<br>
<input type="checkbox" id="Timeb">Time Set (b)
<br>
<input type="button" value="Go" onClick="checkMode()">
<p id="Aa">1a</p> <!--for b,c-->
<p id="Ab">2a</p> <!--for b,c-->
<p id="Ac">3a</p>
<p id="Ad">4a</p>
<p id="Ae">3a</p>
<p id="Af">4a</p>
<p id="Ag">5a</p>
<p id="Ah">6a</p>
<p id="Ai">7a</p>
<p id="Aj">8a</p>
<p id="Ak">1a</p>
<p id="Al">2a</p>
<p id="Ba">8b</p>
<p id="Bb">7b</p>
<p id="Bc">6b</p>
<p id="Bd">5b</p>
<p id="Be">3b</p>
<p id="Bf">4b</p>
<p id="Bg">5b</p>
<p id="Bh">6b</p>
<p id="Bi">7b</p>
<p id="Bj">8b</p>
<p id="Bk">1b</p> <!--for a,c-->
<p id="Bl">2b</p> <!--for a,c-->
<p id="Ca">1c</p>
<p id="Cb">2c</p>
<p id="Cc">PTc</p>
<p id="Cd">3c</p>
<p id="Ce">4c</p>
<p id="Cf">5c</p>
<p id="Cg">6c</p>
<p id="Ch">7c</p>
<p id="Ci">8c</p>
<script>
    function checkMode() {
        var Ma = ["Aa","Ab","Ac","Ad","Ae","Af","Ag","Ah","Ai","Aj","Ak","Al"]
        var Mb = ["Ba","Bb","Bc","Bd","Be","Bf","Bg","Bh","Bi","Bj","Bk","Bl"]
        var Mc = ["Ca","Cb","Cc","Cd","Ce","Cf","Cg","Ch","Ci"]
        var Pa = document.getElementById("Timea").checked;
        var Pb = document.getElementById("Timeb").checked;
        var mode = 0;
        if (Pa == true) {
            for (i=0;i<=Ma.length;i++) {
                document.getElementById(Ma[i]).className = "";
                document.getElementById(Mb[i]).className = "inv";
                document.getElementById(Mc[i]).className = "inv";
            }
        } else if (Pb == true) {
            for (i=0;i<=Mb.length;i++) {
                document.getElementById(Ma[i]).className = "inv";
                document.getElementById(Mb[i]).className = "";
                document.getElementById(Mc[i]).className = "inv";
            }
        } else if (Pa == false && Pb == false) {
            for (i=0;i<=Mc.length;i++) {
                document.getElementById(Ma[i]).className = "inv";
                document.getElementById(Mb[i]).className = "inv";
                document.getElementById(Mc[i]).className = "";
            }
        }
    }
</script>

Что я уже пробовал:

Я несколько раз проверял связь между абзацами и массивами, но так и не смог найти проблему.

---