Проблема с базой данных Cloud Firestore, где она перезаписывает ранее обновленные данные

Question

У меня есть база данных облачного пожарного хранилища, которая использует onSnapshot для отображения данных в таблице. Я использую bootstrap для запуска модального режима при нажатии одного из элементов TD. Это тогда должно позволить мне редактировать эти данные, используя модальное.

Я могу правильно запустить модальный режим и вытянуть данные из БД в модальный режим. Я также могу обновить данные в БД, используя этот модальный.

При нажатии кнопки «Сохранить» он редактирует код в БД и изменяет правильное поле документа.

Однако при повторном запуске модального режима и редактировании новой оценки он обновит эту оценку и все ранее обновленные оценки во время загрузки этой страницы.

Когда я использую db.collection("students").get().then(function(querySnapshot) {

вместо

db.collection("students").onSnapshot(function(querySnapshot) {

Работает, но требует обновления страницы. Я хочу знать, как я могу продолжать использовать onSnapshot и обновлять только нужный документ, чтобы он не требовал обновления страницы

Код JS

const db = firebase.firestore();

db.collection("students").onSnapshot(function(querySnapshot) {
        //setup html as a blank variable
        let html = $("<div></div>");

        querySnapshot.forEach(function(doc) {

            let student = doc.data();

            html = html.add($('<tr> \
                                <th scope="row">'+doc.id+'</th> \
                                 <td>'+student.first_name+'</td> \
                                 <td>'+student.last_name+'</td> \
                                 \
                                 <td data-toggle="modal" data-target="#unitModal" data-unit="IT1" data-student="'+student.first_name+' '+student.last_name+'" data-CG="'+student.UnitGrades.IT1.CG+'" data-student-id="'+doc.id+'">'+student.UnitGrades.IT1.CG+'</td> \
                            </tr>'));

            $('#overallDashboard > tbody:last-child').html(html);//close html
    }); //end for each loop

});//end onSnapshot 



//Code to identify current grade CG set from the clicked td element

$(document.body).on("click", "td", function() {

let studentId = $(this).attr("data-student-id");
                    let unitNo = $(this).attr("data-unit");
                    let CG = $(this).attr("data-CG");
                    let studentName = $(this).attr("data-student");

//display clicked student as heading of modal

$("#unitResultModalHeading").text(unitNo+": "+studentId+" - "+studentName);

//when clicking the save changes button in the modal
$("#saveUnitGrades").click(function () {

let currentGrade = "";

                                   if($('#currentOption1').is(':checked')) 
                                    { 
                                        currentGrade = "F"; 

                                    } else if($('#currentOption2').is(':checked')) 

                                    { 
                                        currentGrade = "R"; 

                                    } else if($('#currentOption3').is(':checked')) 
                                    { 
                                        currentGrade = "P"; 

                                   } else if($('#currentOption4').is(':checked')) 
                                    { 
                                        currentGrade = "M"; 

                                   } else if($('#currentOption5').is(':checked')) 
                                    { 

                                        currentGrade = "D";
                                   }


var gradeDocRef = db.collection("students").doc(studentId);

var setWithMerge = gradeDocRef.set({
   "UnitGrades": {
    [unitNo]: {
    "CG" : currentGrade
}
                                                                            }
}, { merge: true });

//clear the gradeDocRef object when finished with it                                    
    for (let member in gradeDocRef) delete gradeDocRef[member];

});//end save unit grades click 


}//end td click

Бутстрап Модал

<div class="modal fade" id="unitModal" tabindex="-1" role="dialog" aria-labelledby="examModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="unitResultModalHeading"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- Modal Body --> 
      <div class="modal-body">

       <!-- CWK current grade Options -->
      <h6>Current Grade</h6>
      <div id="currentGrade" class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption1" autocomplete="off"> Fail</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption2" autocomplete="off"> Nearly Pass</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption3" autocomplete="off"> Pass</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption4" autocomplete="off"> Merit</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption5" autocomplete="off"> Distinction</label>
      </div>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="saveUnitGrades" type="button" data-dismiss="modal" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>