How to Update Firebase Value Using an HTML Button Value? - html

Question

So I figured out how to update the value of the database, but the another problem came up. When I'm trying to update the value of a certain in the table, the output is that it updated all the values. I'm not getting the correct key when a certain button is pressed for the update. Can you guys help me with this?
My .html file
var rootRef = firebase.database().ref().child("REPORTS").child('05-21-2017');
rootRef.on("child_added", function(snapshot){
var date = snapshot.child("dateAndTime").val();
var lat = snapshot.child("latitude").val();
var long = snapshot.child("longitude").val();
var link = snapshot.child("link").val();
var report = snapshot.child("report").val();
var status = snapshot.child("status").val();
var needs = snapshot.child("needs").val();
var key = snapshot.key;
console.log(key);
var updateData = "updateData()";
$("#table_body").append("<tr id='"+snapshot.key+"'><td>"+snapshot.key+"</td><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</td><td><button onclick = "+updateData+">update</button></td></tr>");
});
My .js file
function updateData(key) {
var rootRef = firebase.database().ref().child("REPORTS").child('05-21-2017');
rootRef.on("child_added", function(snapshot){
var rootRef2 = firebase.database().ref().child("REPORTS").child('05-21-2017/'+snapshot.key);
console.log(rootRef2);
rootRef2.update({status: "Ongoing"});
console.log("success");
});
}
Here is what my table looks like
I want to change a particular table when i click the update button. Please help me, badly needed.

Answer 1

const ulTable = document.getElementById('tabla');
//Create references
const dbRefObject = firebase.database().ref().child('Users');
//Sync table changes
dbRefObject.on('child_added', snap => {
var gear = snap.child('Gear').val();
var level = snap.child('Level').val();
var strength = snap.child('Strength').val();
$(ulTable).append("<tr id="+snap.key+"><td>" + gear + "</td><td>" + level + "</td><td>" + strength + "</td></tr>");
}); //child_added
dbRefObject.on('child_changed', snap => {
var gear = snap.child('Gear').val();
var level = snap.child('Level').val();
var strength = snap.child('Strength').val();
$("#"+snap.key).html("<td>" + gear + "</td><td>" + level + "</td><td>" + strenght + "</td>");
}); //child_changed
dbRefObject.on('child_removed', snap => {
var gear = snap.child('Gear').val();
var level = snap.child('Level').val();
var strength = snap.child('Strength').val();
$("#"+snap.key).html("<td>" + gear + "</td><td>" + level + "</td><td>" + strenght + "</td>").remove();
});
My DB is:
Users -> (Gear, Level, Strength)