Issues loading Firebase data into web application - firebase

Question

I am having problems in my web application regarding loading the data into the application.
The application looks like this:
The data is saved into the database under the users display name. The code looks like this to save the data:
function saveToFB(bookName) {
var user = firebase.auth().currentUser;
name = user.displayName;
firebase.database().ref('Book/' + name).push({
book: bookName,
});
};
So when the user saves the data it is saved under a node which is their display name. I currently have 2 signed up users both with different display names and different data within each. The JSON looks like so:
However, when it comes to loading the data into the application I am having some issues. Rather than loading the data corresponding to the currently signed in user, it simply loads the data from the last signed in user.
As you can see from this screenshot - The console clearly states that Joe is logged in but is being shown George's data.
Not even refreshing the page populates the application with the correct data. I first have to add a new book, which does not get displayed as it is under Joe not George, and only then once I refresh the page does it show Joe's data.
But then the issue occurs again when I sign back out and into another account and the previous data is displayed.
My JS for the rest of the application looks like this:
function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
for (var i = 0; i < 10 && i < list.length; i++) {
lis += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 10; i < 20 && i < list.length; i++) {
lis2 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 20; i < 30 && i < list.length; i++) {
lis3 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
document.getElementById('bookList').innerHTML = lis;
document.getElementById('bookList2').innerHTML = lis2;
document.getElementById('bookList3').innerHTML = lis3;
};
function genLinks(key, bkName) {
var links = '';
links += '<i id="deleteBook" class="material-icons">delete</i> ';
links += '<i id="removeBook" class="material-icons">clear</i> ';
links += '<i id="selectBook" class="material-icons">check</i>';
return links;
};
function del(key, bkName) {
var deleteBookRef = buildEndPoint(key);
deleteBookRef.remove();
}
function select(data, book, key) {
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.color="blue";
var selectBookRef = book;
document.getElementById('alltext').value += selectBookRef + ',';
}
function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/Book/' + '/' + name + '/' + key);
}
var bookList = firebase.database().ref('Book/' + name);
// The issue - I think
bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
book = data[key].book ? data[key].book : '';
if (book.trim().length > 0) {
list.push({
book: book,
key: key
})
}
}
}
refreshUI(list);
});
What i'm looking for is for a user to log into their account and see their data and no one else's.
Any help with this issue would be great - This is the only method i've tried so far to only show the user their data and not all the other users' data along with it - So if there are any other suggestions on how to do this i'd appreciate it.