Страницы документов пожарного магазина

Question

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

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

<div class="URP_div" id="URP" style="display: none;">
    <h1 id="StudentPage"></h1>
    <div class="SPROW">
      <labe>Name:</label>
        <label id="SName"></label>
    </div>
    <div class="SPROW">
      <label for="">IRL:</label>
      <label id="SId"></label>
    </div>
    <div class="SPROW">
      <label for="">Session Date:</label>
      <label for="" id="SSd"></label>
    </div>
    <div class="SPROW">
      <label for="">Exam Level:</label>
      <label for="" id="SEl"></label>
    </div>
    <div class="SPROW">
      <label for="">Exam Genre:</label>
      <label for="" id="SEg"></label>
    </div>
    <div class="SPROW">
      <label for="">Teacher ID:</label>
      <label for="" id="STId"></label>
    </div>
    <div id="AGR">
      <div class="ExaminerArea-Results1">
        <label>Accredited Grade Results</label>
        <input type="number" placeholder="Technique: (15)" id="Res1" class="Results-input">
        <input type="number" placeholder="Control: (15)" id="Res2" class="Results-input">
        <input type="number" placeholder="Stanima & Agility: (15)" id="Res3" class="Results-input">
        <input type="number" placeholder="Musicality: (15)" id="Res4" class="Results-input">
        <input type="number" placeholder="Interpretation: (10)" id="Res5" class="Results-input">
      </div>
      <div class="ExaminerArea-Results2">
        <input type="number" placeholder="Knowledge: (15)" id="Res6" class="Results-input">
        <input type="number" placeholder="Performance Skills: (5)" id="Res7" class="Results-input">
        <input type="number" placeholder="Personal Discipline: (10)" id="Res8" class="Results-input">
      </div>
    </div>
    <div id="NAGR">
      <div class="FSPO">
        <label>Foundation/Street/Performance Only</label>
        <select name="FSPO" id="RPMD">
          <option value="Not Awarded" selected="">Not Awarded</option>
          <option value="Pass">Pass</option>
          <option value="Merit">Merit</option>
          <option value="Distingtion">Distinction</option>
        </select>
      </div>
    </div>
    <div class="SPROW">
      <textarea name="ResultsComment" id="RC" cols="30" rows="10" placeholder="Exam Comments...."
        maxlength="200"></textarea>
    </div>
    <button onclick="SumbitResult()">Upload</button>
    <button onclick="BURP()">Back</button>
    <button onclick="logout()">Logout</button>
  </div>

    function BURP() {
      document.getElementById('URP').style.display = "none";
      document.getElementById('exam').style.display = "block";
      document.getElementById('SName').innerHTML = "";
      document.getElementById('SId').innerHTML = "";
      document.getElementById('SSd').innerHTML = "";
      document.getElementById('SEl').innerHTML = "";
      document.getElementById('SEg').innerHTML = "";
      document.getElementById('STId').innerHTML = "";
      document.getElementById('StudentPage').innerHTML = "";
            var table = document.getElementById('StduentTable')
      for (var i = table.rows.length - 1; i > 0; i--) {
        table.deleteRow(i);
      }
      var db = firebase.firestore();

      console.log(CRSD);

      db.collection("Students").where('SessionDate', '==', CRSD).where('TeacherID', '==', CRTID).onSnapshot(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          var data = doc.data();

          var content = '';
          content += '<tr>';
          content += '<td id="name">' + data.Student + '</td>';
          content += '<td id="id">' + data.StudentID + '</td>';
          content += '<td id="eg">' + data.ExamGenre + '</td>';
          content += '<td id="el">' + data.ExamLevel + '</td>';
          content += '<td>' + '<button class="btn" onclick="URP()">Upload Results</button>' + '</td>';
          $('#StduentTable').append(content);

        })
      });
    }
    var cel1;
    var cel2;
    var cel3;
    var cel4;

    $('#StduentTable').on('click', '.btn', function () {
      var currow = $(this).closest('tr');
      cel1 = currow.find('td:eq(0)').text();
      cel2 = currow.find('td:eq(1)').text();
      cel3 = currow.find('td:eq(2)').text();
      cel4 = currow.find('td:eq(3)').text();
      console.log(cel1)
      console.log(cel2)
      console.log(cel3)
      console.log(cel4)
      var table = document.getElementById("StduentTable");

      var CRSD = document.getElementById('RSD').value;
      var CRTID = document.getElementById('RTID').value;
      document.getElementById('URP').style.display = "block";
      document.getElementById('exam').style.display = "none";
      var db = firebase.firestore();
      db.collection("Students").where('SessionDate', '==', CRSD).where('TeacherID', '==', CRTID).where('Student', '==', cel1).where('StudentID', '==', cel2).where('ExamLevel', '==', cel4).where('ExamGenre', '==', cel3).onSnapshot(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          console.log('test');
          var data = doc.data();
          var text = data.Student + "'s Page.";
          DS = data.Student;
          DSID = data.StudentID;
          DSSD = data.SessionDate;
          DSEL = data.ExamLevel;
          DSEG = data.ExamGenre;
          DSTID = data.TeacherID;
          document.getElementById('StudentPage').innerHTML = text;
          document.getElementById('SName').innerHTML = DS;
          document.getElementById('SId').innerHTML = DSID;
          document.getElementById('SSd').innerHTML = DSSD;
          document.getElementById('SEl').innerHTML = DSEL;
          document.getElementById('SEg').innerHTML = DSEG;
          document.getElementById('STId').innerHTML = DSTID;
        })
      });
    })
    <script>
    function SumbitResult() {
          var CRSD = document.getElementById('RSD').value;
          var CRTID = document.getElementById('RTID').value;
          var dataIn = false
          var db = firebase.firestore();
          var r1 = document.getElementById('Res1').value;
          var r2 = document.getElementById('Res2').value;
          var r3 = document.getElementById('Res3').value;
          var r4 = document.getElementById('Res4').value;
          var r5 = document.getElementById('Res5').value;
          var r6 = document.getElementById('Res6').value;
          var r7 = document.getElementById('Res7').value;
          var r8 = document.getElementById('Res8').value;
          var ExamComment = document.getElementById('RC').value;
          var NAW = document.getElementById('RPMD').value;
          var totalscore =
            document.getElementById('Res1').valueAsNumber +
            document.getElementById('Res2').valueAsNumber +
            document.getElementById('Res3').valueAsNumber +
            document.getElementById('Res4').valueAsNumber +
            document.getElementById('Res5').valueAsNumber +
            document.getElementById('Res6').valueAsNumber +
            document.getElementById('Res7').valueAsNumber +
            document.getElementById('Res8').valueAsNumber;
          var tot2 = totalscore;
          if (NAW !== "Not Awarded") {
            r1 = 0;
            r2 = 0;
            r3 = 0;
            r4 = 0;
            r5 = 0;
            r6 = 0;
            r7 = 0;
            r8 = 0;
            r9 = 0;
            r10 = 0;
            tot2 = 0;
          }
          var OverallResult;
          if (tot2 > 89) {
            OverallResult = "Distingtion with Honours"
          }
          if (tot2 > 76 && tot2 < 88) {
            OverallResult = "Distingtion"
          }
          if (tot2 > 58 && tot2 < 75) {
            OverallResult = "Merit"
          }
          if (tot2 > 43 && tot2 < 57) {
            OverallResult = "Pass"
          }
          if (tot2 <= 42) {
            OverallResult = "Not Awared"
          }
          db.collection("Students").where("SessionDate", "==", CRSD)
            .where('SessionDate', '==', CRSD).where('TeacherID', '==', CRTID).where('Student', '==', cel1).where('StudentID', '==', cel2).where('ExamLevel', '==', cel4).where('ExamGenre', '==', cel3)
            .onSnapshot(function (querySnapshot) {
              querySnapshot.forEach(function (doc) {
                db.collection("Students").doc(doc.id).update({
                  "Results.Results1": r1,
                  "Results.Results2": r2,
                  "Results.Results3": r3,
                  "Results.Results4": r4,
                  "Results.Results5": r5,
                  "Results.Results6": r6,
                  "Results.Results7": r7,
                  "Results.Results8": r8,
                  "Results.TotalScore": tot2,
                  "Results.Exam_Comments": ExamComment,
                  "Results.Non_Accredited_Exam": NAW,
                  "Results.Examiner_ID": DBID,
                  "Results.Overall_Results": OverallResult
                })
                dataIn = true;
              })
            });
          if (dataIn = true) {
            document.getElementById('REG').value = "";
            document.getElementById('REL').value = "";
            document.getElementById('RSD').value = "";
            document.getElementById('RCID').value = "";
            document.getElementById('RTID').value = "";
            document.getElementById('RC').value = "";
            document.getElementById('Res1').value = "";
            document.getElementById('Res2').value = "";
            document.getElementById('Res3').value = "";
            document.getElementById('Res4').value = "";
            document.getElementById('Res5').value = "";
            document.getElementById('Res6').value = "";
            document.getElementById('Res7').value = "";
            document.getElementById('Res8').value = "";
          }
        }
    </script>