Best way to display and edit data from a database using Express/SQLite

I was in the middle of working on the Web Dev independent project #4: Web Dev Independent Project #4 – Temperature Calculator (Back-End)

I’ve been able to initiate the POST request fine to update the database using the calculations. I also completed the GET request using Handlebars.

But what I’m struggling with is now after making the GET displaying the data and also making it available to edit or delete through the browser. I thought it must not be possible with Handlebars, as when I created an event handler for the Edit button, only the first one in the list changed to “Save”.

So then I tried using Firebase instead, but I am not able to submit data to the database from the browser.

I then tried using firebase to do this instead, but after spending hours googling the errors that are coming up, I keep getting this message:
Uncaught TypeError: firebase.database is not a function at submitClick (index.js:5) at HTMLButtonElement.onclick ((index):94)

This is my code from index.html, most of which comes directly from downloading firebase (I’ve removed the API key):

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/7.17.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/7.17.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/7.17.2/firebase-database.js"></script>
    <script defer src="/__/firebase/7.17.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/7.17.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

    <style media="screen">
      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      document.addEventListener('DOMContentLoaded', function() {
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.messaging().requestPermission().then(() => { });
        //'/path/to/ref').getDownloadURL().then(() => { });
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        try {
          document.addEventListener("DOMContentLoaded", function(event) {
           console.log("DOM fully loaded and parsed");
          let app =;
          let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
          document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
        } catch (e) {
          document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';

    <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src=""></script>

  // Your web app's Firebase configuration
  var firebaseConfig = {
    authDomain: "",
    databaseURL: "",
    projectId: "tempcalc-16e7e",
    storageBucket: "",
    messagingSenderId: "1041938849402",
    appId: "1:1041938849402:web:b36918a5e5151c840725c3",
    measurementId: "G-6T9LJXWB8Y"
  // Initialize Firebase

<div class="mainDiv" align="right">
  <h1 align="left">Firebase Web App</h1>
  <textarea id="mainText" placeholder="Enter text here..."></textarea>
  <button id="submitBtn" onclick="submitClick()"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>

<script src="index.js"></script>

Is there a better way of making data editable in a browser?