What function can I write in JS to edited two grades separately without one affecting each other?

Question

What I'm trying to figure out in JS is to write a function that lets me edited two student's grades separately without one affecting the other. The problem right now is that if I edited student #2's grades, student #1's grades change too. I can't figure out the function to write in JS. I've posted the code below

I'm thinking out loud here but would an if statement help?

I've tried writing an if statement in the edited line in JS, but that gave me an error. I'm thinking a loop would help? Maybe a true or false statement?

studentArray.push(studentObject);
console.log('student array size is : ' + studentArray.length);
// blank out add Student form
getHandleValue('english', 'clear');
getHandleValue('math', 'clear');
getHandleValue('physics', 'clear');
getHandleValue('computer', 'clear');
getHandleValue('science', 'clear');

renderStudentList();
}

function renderUI(studentID, english, math, physics, computer, science) {
    const display = `

    <div class='student' id=${studentID}>
       <h1>Student ID: ${studentID} </h1>
       <br>
       <h4>English Grade: ${english}</h4>
       <h4>Science Grade: ${science}</h4>
       <input type='button' value='Delete' class="delete">
       <input type='button' value='Edit' class="edit">
   </div>
   <br>
   

    `
    
    return display;
}

function renderStudentList() {
    let studentList = document.getElementById('studentList');
    studentList.innerHTML = '';
    for (studentIndex =0; studentIndex < studentArray.length; studentIndex++) {

        //console.log(studentArray[studentIndex].studentID)
        studentList.innerHTML = studentList.innerHTML + 
             renderUI(studentArray[studentIndex].studentID,
                      studentArray[studentIndex].english,
                      studentArray[studentIndex].math,
                      studentArray[studentIndex].physics, 
                      studentArray[studentIndex].computer,
                      studentArray[studentIndex].science);

    }
}

let studentList = document.getElementById('studentList');
// one form when you just need to call a function
//studentList.addEventListener('click', myButtons);
// second form when you pass a param 
studentList.addEventListener('click', (event) => { // "event" here is the event parameter
    const clickedEvent = event.target;
    //console.log(clickedEvent.value);
    //console.log(clickedEvent);
    const parentNode = clickedEvent.parentNode;
    const studentID = parseInt(parentNode.id);
    if (clickedEvent.value === 'Delete') {
        // we are going to use splice to remove elements
        if (studentArray.length !== 0) {
            //const indexToDelete = studentID - 1;
            // find the student id
            let indexToDelete = -1;
            for (studentIndex =0; studentIndex < studentArray.length; studentIndex++) {
                if (studentArray[studentIndex].studentID === studentID) {
                    indexToDelete = studentIndex;
                    break;
                }
            }
            studentArray.splice(indexToDelete,1)
            renderStudentList()
        }

    }else if (clickedEvent.value === 'Edit') {
        // need to add code here
        let indexToEdit = -1;
        for (studentIndex =0; studentIndex < studentArray.length; studentIndex++) {
            if (studentArray[studentIndex].studentID === studentID) {
                indexToEdit = studentIndex;
                break;
            }
        }

        // now have the index to delete
        document.getElementById('addStudent').value = 'Update';
        // copy the data
        
        document.getElementById('english').value =studentArray[indexToEdit].english;
        document.getElementById('math').value=studentArray[indexToEdit].math;
        document.getElementById('physics').value=studentArray[indexToEdit].physics;
        document.getElementById('computer').value=studentArray[indexToEdit].computer;
        document.getElementById('science').value=studentArray[indexToEdit].science;

        document.getElementById('addStudent').removeEventListener('click', addStudent);
        //document.getElementById('addStudent').addEventListener('click', updateStudent);
        
        
        

        document.getElementById('addStudent').addEventListener("click", () => { updateStudent(indexToEdit) });
      


        //HELPPPPP

    }else {
        alert('button is not supported')
    }


})

function updateStudent(updateIndex) {
    console.log("I am in update, index is" + updateIndex)
   
   
    studentArray[updateIndex].english = document.getElementById('english').value;
   studentArray[updateIndex].math = document.getElementById('math').value;
   studentArray[updateIndex].physics = document.getElementById('physics').value;
   studentArray[updateIndex].computer = document.getElementById('computer').value;
   studentArray[updateIndex].science = document.getElementById('science').value;
   document.getElementById('addStudent').value = 'Add';
//    getHandleValue('english', 'clear');
//    getHandleValue('math', 'clear');
//    getHandleValue('physics', 'clear');
//    getHandleValue('computer', 'clear');
//    getHandleValue('science', 'clear');

//if () {
    //display .value = "";

    //() = false;


   document.getElementById('addStudent').removeEventListener('click', updateStudent);
   document.getElementById('addStudent').addEventListener('click', addStudent);
   renderStudentList();

}