How do I save changes to my firebase db using the datatable functionality (Edit/Delete)?

Oneiric98

Im having trouble saving changes to my firebase db.

Below is my code:

var table;

      $("#datatable-buttons").on("mousedown", "td .fa.fa-minus-square", function(e) {
        table.row($(this).closest("tr")).remove().draw();
      })

      $("#datatable-buttons").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value=\""+txt+"\">");
        });

      });

      $("#datatable-buttons").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#datatable-buttons").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
        
        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');
        
        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });
      
      
       $("#datatable-buttons").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });

//create references
  const rootRef = firebase.database().ref().child('students/7A');

  rootRef.on("child_added", snap => {
    var sn = snap.child("SN").val();
    var name = snap.child("fName").val();
    var average = snap.child("genAve").val();
    var lvl = snap.child("grLevel").val();
    var pass = snap.child("password").val();
    var section = snap.child("section").val();

    $("#datatable-buttons").DataTable().row.add([sn, name, pass, lvl, section, average, '<td><i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;&nbsp;<i class="fa fa-minus-square" aria-hidden="true"></i></td>']).draw();
  });

  rootRef.on("child_changed", snap => {
    var sn = snap.child("SN").val();
    var name = snap.child("fName").val();
    var average = snap.child("genAve").val();
    var lvl = snap.child("grLevel").val();
    var pass = snap.child("password").val();
    var section = snap.child("section").val();

    $("#datatable-buttons").DataTable().row.add([sn, name, pass, lvl, section, average, '<td><i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;&nbsp;<i class="fa fa-minus-square" aria-hidden="true"></i></td>']).draw();
  });

  rootRef.on("child_removed", snap => {
    var sn = snap.child("SN").val();
    var name = snap.child("fName").val();
    var average = snap.child("genAve").val();
    var lvl = snap.child("grLevel").val();
    var pass = snap.child("password").val();
    var section = snap.child("section").val();

    $("#datatable-buttons").DataTable().row.add([sn, name, pass, lvl, section, average, '<td><i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;&nbsp;<i class="fa fa-minus-square" aria-hidden="true"></i></td>']).draw();
  });

and my table:

<table id="datatable-buttons" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>SN</th>
                          <th>Full Name</th>
                          <th>Password</th>
                          <th>Gr. Level</th>
                          <th>Section</th>
                          <th>General Average</th>
                          <th>Action</th>
                        </tr>
                      </thead>


                      <tbody id="table_body">
                        
                      </tbody>
                    </table>