function displayRecoveryCodes() {
  const recoverCodes = document.getElementById("recovery-codes-raw");
  // early return if recoverCodes not found
  if (!recoverCodes) {
    return;
  }

  var recoveryCodesContent = recoverCodes.innerHTML;
  recoveryCodesContent = recoveryCodesContent.replace("[", "");
  recoveryCodesContent = recoveryCodesContent.replace("]", "");
  recoveryCodesContent = recoveryCodesContent.split(",");
  for (let i = 0; i < recoveryCodesContent.length; i++) {
    if (i % 2 == 0) {
      document.getElementById("recovery-codes").innerHTML += "<div class=\"recovery-code-gray printable\">" + recoveryCodesContent[i] + "</div>";
    }
    else {
      document.getElementById("recovery-codes").innerHTML += "<div class=\"recovery-code-white printable\">" + recoveryCodesContent[i] + "</div>";
    }
  }
  recoverCodes.remove();
}

displayRecoveryCodes();
