Why would only one item be showing up from database when I refresh (Firebase)

Question

I have created a to-do list that links to firebase but deletes items from firebase but when I refresh if there are more than one item in firebase it doesn't return the entire population. I am trying to have it where the entire population stays on the html and is only removed when it is "removed"

I tried playing around with local storage but that just overwrote my firebase stuff. Any suggestions would be greatly appreciated. Like I said I want to try and get everything that is in the database to stay on the HTML page and not be removed until it is removed from the database.

firebase.initializeApp(config);

//create a variable to reference the database
var database = firebase.database();


window.onload=function(){
    $("#Login-Warning").hide();
    //get login elements
    const txtEmail = document.getElementById('txtEmail');
    const txtPassword = document.getElementById("txtPassword");
    const btnLogin = document.getElementById('btnLogin');
    const btnSignUp = document.getElementById('btnSignUp');

    //add login event
    btnLogin.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth(); 

        auth.signInWithEmailAndPassword(email, pass);
        //sign in 
        const promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(e=> console.log(e.message));
    });

    //add signup
    btnSignUp.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth(); 
        //sign in 
        const promise = auth.signInWithEmailAndPassword(email, pass);
        auth.createUserWithEmailAndPassword(email, pass);
        promise.catch(e=> console.log(e.message));
    });

    //add realtime listener
    firebase.auth().onAuthStateChanged(firebaseUser => {
        if(firebaseUser) {
            console.log(firebaseUser);
            $("#Login-Warning").remove();
            Runchecklist();
        } else {
            console.log('not logged in');
            $("#Login-Warning").show();
        }
    });

    function Runchecklist() {
        //initialize value
        var todos = "";
        var Firedata = firebase.database().ref().child('todos/' + todos);
        console.log(Firedata);

        $(document).ready(function() {
            //user clicked on the add button in the to-do field add that text into the 
            to-do text
            $('#add-todo').on('click', function(event) {
                event.preventDefault();
                //values per text box
                todos = $("#todo-input").val().trim();

                //test values from textbox
                console.log(todos);

                //code for handling the push
                database.ref().push({
                    todos: todos
                });

            });

            //firebase watcher
            database.ref().limitToLast(1).on('value', snapshot => {
                var index = 0;
                var test = snapshot.val();
                var keys = Object.keys(test);

                snapshot.forEach((snap) => {

                    todos = snap.child("todos").val();
                    //prepend values to html
                    $("<div/>", {
                        "class": "to-do-item",
                        "data-path": keys[index]
                    }).append([localStorage.setItem('data', todos)]).appendTo($(".col-4"));
                    index++;

                    //to remove item from checklist
                    todos = snap.child("todos").val();
                    $(document.body).on("click", ".to-do-item",function(e) {
                        $(this).remove();
                        database.ref(`/${e.currentTarget.attributes[1].nodeValue}`).remove();

                    });

                });
            });

        });
    }
}

Answer 1

You're asking for limitToLast(1) here:

database.ref().limitToLast(1).on('value', snapshot => {

The limitToLast(1) means that the database returns a snapshot with only the latest item from ref(). If you want more items, change the number in the call to limitToLast() or remove it altogether (to get all items):

database.ref().on('value', snapshot => {