Using GetElementsByClassName to check checkbox values and if the checkbox is checked programatically

The task is to write to a string whether a checkbox has been checked out of a series of 27 checkboxes with the same class name of "GEMS_0".

When I access elements through console it works.

document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value

returns "moved"

document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value

returns false.

When I do it programmatically, by calling getGEMSValue(0), it works for the first element and then returns null for the value of the second element when it should be "filled with wonder". I tried changing to "filled-with-wonder" but that didn't change anything.

Here is the code for accessing the elements programmatically:

  function getGEMSValue(num) {
    let return_string = "";
    let checkboxes = document.getElementsByClassName("GEMS_" + num.toString());
    console.log(checkboxes);
    for (var i = 0; i < checkboxes.length; i++) {
      console.log(checkboxes[i].id);
      console.log(document.getElementById(checkboxes[i].id));
      let value = document.getElementById(checkboxes[i].id).value
      if (document.getElementById(checkboxes[i].id).checked) {
        return_string += value + ";";
      } else {
        return_string += "false;";
      }
    }
    //remove semicolon at end
    return_string = return_string.slice(0,-1);
    return return_string;
  }

This is the HTML being accessed.

      <p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
      <!-- 9 emotions per row, 5 rows -->
      <div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
          <label class="form-check-label" for="inlineCheckbox1">moved</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
          <label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
          <label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
          <label class="form-check-label" for="inlineCheckbox4">fascinated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
          <label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
          <label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
          <label class="form-check-label" for="inlineCheckbox7">serene</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
          <label class="form-check-label" for="inlineCheckbox8">calm</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
          <label class="form-check-label" for="inlineCheckbox9">soothed</label>
        </div>
        <br />
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
          <label class="form-check-label" for="inlineCheckbox10">tender</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
          <label class="form-check-label" for="inlineCheckbox11">affectionate</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
          <label class="form-check-label" for="inlineCheckbox12">mellow</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
          <label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
          <label class="form-check-label" for="inlineCheckbox14">sentimental</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
          <label class="form-check-label" for="inlineCheckbox15">dreamy</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
          <label class="form-check-label" for="inlineCheckbox16">strong</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
          <label class="form-check-label" for="inlineCheckbox17">energetic</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
          <label class="form-check-label" for="inlineCheckbox18">triumphant</label>
        </div>
        <br />
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
          <label class="form-check-label" for="inlineCheckbox19">animated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
          <label class="form-check-label" for="inlineCheckbox20">bouncy</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
          <label class="form-check-label" for="inlineCheckbox21">joyful</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
          <label class="form-check-label" for="inlineCheckbox22">sad</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
          <label class="form-check-label" for="inlineCheckbox23">tearful</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
          <label class="form-check-label" for="inlineCheckbox24">blue</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
          <label class="form-check-label" for="inlineCheckbox25">tense</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
          <label class="form-check-label" for="inlineCheckbox26">agitated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
          <label class="form-check-label" for="inlineCheckbox27">nervous</label>
        </div>
        <br />
      </div>