What is the alternative of [i] that is equivalent to "All"?

First of all, I'm sorry for this noob question and badly written code.

---

function toggleOnTranscript() {
    localStorage.setItem("doToggle", "true");
    var toggleStatus = localStorage.getItem("doToggle");
    if (toggleStatus = "true") {
        var transcriptDivs = document.getElementsByClassName("transcript");
        for (var i = 0; i < transcriptDivs.length; i++) {
            transcriptDivs[i].classList.add("show");
        }
    } else {
        console.log("Yeah! Nah! You clicked the wrong button, mate.");
    }
};

// ---------------------------------------------------

function toggleOffTranscript() {

    var toggleStatus = localStorage.getItem("doToggle");
    if (toggleStatus == "true") {
        var transcriptDivs = document.getElementsByClassName("transcript");
        for (var i = 0; i < transcriptDivs.length; i++) {
            transcriptDivs[i].classList.remove("show");
        }
        localStorage.setItem("doToggle", "false");
    } else {
        console.log("Yeah! Nah! You clicked the wrong button, mate.");
    }
};

* {
            font-family: Roboto, Arial, Helvetica, sans-serif;
        }

        .bttn {
            padding: 15px 30px;
            display: block;
            color: white;
            cursor: pointer;
            user-select: none;
        }

        .show-transcripts {
            background: green;
        }

        .hide-transcripts {
            background: red;
        }

        .transcript {
            display: none;
        }

        .transcript.show {
            display: block;
        }

<span class="bttn show-transcripts" onclick="toggleOnTranscript()">Show Transcripts</span>
    <div id="transcriptID1" class="transcript">
        <h2>Transcript Div #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tincidunt elit non vulputate. Duis
            mollis risus libero, at hendrerit lacus consectetur in. In non vestibulum enim, a scelerisque augue.</p>
        <p>Fusce id nulla laoreet massa consequat feugiat vel aliquam ex. Donec tincidunt facilisis aliquet.</p>
    </div>
    <div id="transcriptID2" class="transcript">
        <h2>Transcript Div #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tincidunt elit non vulputate. Duis
            mollis risus libero, at hendrerit lacus consectetur in. In non vestibulum enim, a scelerisque augue.</p>
        <p>Fusce id nulla laoreet massa consequat feugiat vel aliquam ex. Donec tincidunt facilisis aliquet.</p>
    </div>
    <span class="bttn hide-transcripts" onclick="toggleOffTranscript()">Hide Transcripts</span>

---

If the above code snippet is not working, please proceed to this CodePen.

---

1. When you click the "Transcript Button", this will save one (1) Key & Value to localStorage which is "doToggle", "true". This will be used for If/Else statement.
2. Then, there will be an if/else Statement. If doToggle = true, then a class show will be added to all dividers with a class of transcript. Else, just ignore / do nothing.

---

I tried to use

var transcriptDivs = document.getElementsByClassName("transcript");
for (var i = 0; i < transcriptDivs.length; i++) {
    transcriptDivs[i].classList.add("show");
}

and this works and adds "show" class to all dividers with "transcript" class. But, this just ignores the if condition which is totally wrong. It needs to check if doToggle = true first, then add the class "show" to the "transcript" dividers.

---

I am really not sure how can I explain this. I hope you understand what I am asking for. I just started learning JS yesterday. I am trying to ask no questions.

TIA!