Как создать таблицу в HTML с данными Firebase?

Question

Я пытаюсь создать таблицу HTML, которая обновляет данные в реальном времени, когда мои пользователи используют мое приложение. Все, что нужно сделать, это извлечь данные из базы данных Firebase Real-Database, создать строку таблицы и обновить ячейки в строке.

Я уже все перепробовал, но я не могу указать себе в правильном направлении. Было бы очень полезно, если бы кто-то мог сделать это для меня. Это моя структура базы данных (img) Ниже приводится вывод, который я получаю. Мой окончательный вывод (img) Это мой код HTML и Javascript.

<script>
    //app firebase config.
    var firebaseConfig = {
       // My config is added.
      };
      
      // initialize firebase  
    firebase.initializeApp(firebaseConfig);

    //var accept_btn = document.
    var database = firebase.database();
    database.ref("bookings").on('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';

            snapshot.forEach(function(data){
                var val = data.val();
                content += '<tr>';
                content += '<td>' + "car" + '</td>';
                content += '<td>' + "auto" + '</td>'
                content += '<td>' + val.Date_from + '</td>'
                content += '<td>' + val.Time_from + '</td>'
                content += '<td>' + val.Date_To + '</td>'
                content += '<td>' + val.Time_to + '</td>'
                content += '<td>' + val.Mode + '</td>'
                //content += '<td id = "Actions_tab">' + <button id = "accept_btn">Accept</button>
                   //                 <button id = "decline_btn">Decline</button>  + '</td>'
                content += '</tr>';
            });

            $("#new_bookings").append(content);
        }
    });
</script>

<table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Transmission</th>
            <th scope="col">From (Date)</th>
            <th scope="col">From (Time)</th>
            <th scope="col">To (Date)</th>
            <th scope="col">To (Time)</th>
            <th scope="col">Mode</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody id="new_bookings">
          <tr id="tr">
           
            <td>Swift  </td>
            <td>Auto</td>
            <td>10/4/18 </td>
            <td>14:00</td>
            <td>11/4/18</td>
            <td>18:30</td>
            <td>Hub</td>
            <td id = "Actions_tab"><button id = "accept_btn">Accept</button>
                <button id = "decline_btn">Decline</td>
          </tr>
        </tbody>
      </table>