title: How do you retrieve data from your firebase realtime database to selectable HTML table?
body: <p>I am trying to retrieve data from my firebase realtime database, and then append them onto my HTML table. However, I don't have any ideas on how to create the HTML table that is selectable and submit what I selected. Here is how my database tree looks like.</p>
  
  <p><a href="https://i.stack.imgur.com/tkRpl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkRpl.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML table I made. </p>
  
  <pre><code>&lt;table class="hotel-list" id="Marriott-hotel-list"&gt;
      &lt;thead class="thead-inverse"&gt;
          &lt;tr&gt;
          &lt;th&gt;Hotel Name&lt;/th&gt;
          &lt;th&gt;Hotel Location&lt;/th&gt;
          &lt;th&gt;Cheap Room's Price&lt;/th&gt;
          &lt;th&gt;Amount of Cheap Room&lt;/th&gt;
          &lt;th&gt;Expensive Room's Price&lt;/th&gt;
          &lt;th&gt;Amount of Cheap Room&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr id="tr"&gt;
          &lt;td id="Hotel-Name"&gt;&lt;/td&gt;
          &lt;td id="Hotel-location"&gt;&lt;/td&gt;
          &lt;td id="Cheap-Rooms-Price"&gt;&lt;/td&gt;
          &lt;td id="Amount-of-Cheap-Room"&gt;&lt;/td&gt;
          &lt;td id="Expensive-Rooms-Price"&gt;&lt;/td&gt;
          &lt;td id="Amount-of-Cheap-Room"&gt;&lt;/td&gt;
         &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and here is the js that I used to try to append data onto the table.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;
        var database = firebase.database();
          database.ref('projectTable/hotelTable/Hilton/').orderByChild('hotel_name').once('value', function (snapshot) {
  
     if (snapshot.exists()) {
       var content = '';
       snapshot.forEach(function (data) {
       var val = data.val();
          content += '&lt;tr&gt;';
         content += '&lt;td&gt;' + val.hotel_name + '&lt;/td&gt;';
         content += '&lt;td&gt;' + val.Location + '&lt;/td&gt;';
         content += '&lt;td&gt;' + val.cheap_room_price + '&lt;/td&gt;';
         content += '&lt;td&gt;' + val.max_amount_cheap_room + '&lt;/td&gt;';
         content += '&lt;td&gt;' + val.expensive_room_price + '&lt;/td&gt;';
         content += '&lt;td&gt;' + val.max_amount_expensive_room + '&lt;/td&gt;';
         content += '&lt;/tr&gt;';
             });
          $('#Marriott-hotel-list').append(content);
             }
           });
  
    &lt;/script&gt;
  </code></pre>
  
  <p>I try to put the hotel name, Location, cheap_room_price, max_amount_cheap_room, expensive_room_price, max_amount_expensive_room, these values from the database onto the table.
  But nothing shows on the web page and also I realize the table I made has no selectable feature. 
  Can any expert point out my error and help me fix it in Javascript? Thank you and much appreciation! </p>