liveChange.js

// Array with all gpas
const gradeNodes = [document.getElementById('grade1')];
const grades = [];

// Create click event listeners for each gpa
gradeNodes.forEach((gradeNode, i) => {
  gradeNode.addEventListener("click", () => {
    gradeNodes[i].innerHTML = `<input value="${grades[i]}" id="${i}" />`
  });
});