How to get realtime firebase data and show on update table on web page

I want to export data from firebase and show the data on web page. The table should updtae but unfortantly the table can't create new rows. the code is example for two childs and the image show how the page looks right now.

the html code:

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Board</th>
      <th scope="col">Image</th>
      <th scope="col">Notes</th>
      <th scope="col">Yes</th>
      <th scope="col">No</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><a id="board1"></a></td>
      <td><a id="image1"></a></td>
      <td></td>
      <td><input type="checkbox" name="firstYes" /></td>
      <td><input type="checkbox" name="firstNo" /></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><a id="board2"></a></td>
      <td><a id="image2"></a></td>
      <td></td>
      <td><input type="checkbox" name="secYes" /></td>
      <td><input type="checkbox" name="secNo" /></td>
    </tr>

the js code:

function doFunction(){
    var ref = firebase.database().ref();
      ref.on("value", function(snapshot) {
      board=snapshot.child("1").child("Board").val();
      imageChild=snapshot.child("1").child("Image").val();
      document.getElementById("board1").innerHTML = board;
      document.getElementById("image1").innerHTML = imageChild;
    })
  }


  function doFunctionSec(){
    var ref = firebase.database().ref();
      ref.on("value", function(snapshot){
        boardsec=snapshot.child("2").child("Board").val();
        imageChildsec=snapshot.child("2").child("Image").val();
        document.getElementById("board2").innerHTML = boardsec;
        document.getElementById("image2").innerHTML = imageChildsec;
       })
  }