Loop within the submit button

I have the submit button that should submit the grade to a student class. But when I click the button, it only submits the note to the last student in the list. The list of students and the list of grades are stored in the students array and array grids. I'm using a loop for this, but I'm not getting the whole class to get the grades. My function is JS and the button calls the function in HTML. How do I make the loop add the grade to all students?

function addGradeToUsers(){
   showData();
   var students = [58686,58687, 392854];  // user Ids
   var orgUnitId= 167877;   //course number
   var gradeObjectId =111321; //grade name
   var gradeValue= [34,10,33];


    for(var i=0; i< students.length; i++){ 
    document.getElementById("PUTField").checked = true;
    document.getElementById("actionField").value = "/d2l/api/le/1.0/"+ orgUnitId +"/grades/"+ gradeObjectId+ "/values/"+ students[i] +"";
    document.getElementById("dataField").value = "{\n \"Comments\":{\"Content\":\"null\",\"Type\":\"Text\"},\n \"PrivateComments\":{\"Content\":\"null\",\"Type\":\"Text\"},\n \"GradeObjectType\": 1,\n\"PointsNumerator\":"+gradeValue[i]+" \n}";  
    } 
}

And here is the code for the button:

<div class="form-group">
<label for='contentType'>Importa notas</label>
<input class="btn btn-default" type="button" value="Add Grade to Users" onclick='addGradeToUsers()'>
  </div>