Как обновить базу данных и пользовательский интерфейс с помощью Firebase Web

Question

Я пытаюсь выяснить, как обновить базу данных и пользовательский интерфейс с помощью входов и кнопки с помощью Firebase Web. Основная проблема в том, что я не знаю, как именно получить идентификатор документа или, может быть, есть способ использовать ввод для выбора, например, имени и изменения других значений. Пока мне удается выяснить следующий код:

function updateFirebase() {
    const fb = firebase.database().ref()
    //get field value
    name = document.getElementById('uname').value
    specialist = document.getElementById('uspecialist').value

    data = {name,specialist}
    //update database
    fb.child('guides/').update(data);
  }

 <div>
            <input type="text" name="txt" id="uname">
            <input type="text" name="txt" id="uspecialist">
            <button onclick="updateFirebase()">Update</button>
        </div>

И я использую следующий код для записи и отображения данных из базы данных:

Вот как я записываю значения в базу данных :

db.collection("guides").onSnapshot(snapshot => {
      setupGuides(snapshot.docs);
  });

 const createForm = document.querySelector('#create-form');
  createForm.addEventListener('submit', (e) => {
    e.preventDefault();
  
    db.collection('guides').add({
      image: createForm['image'].value,
      name: createForm['name'].value,
      specialist: createForm['specialist'].value,
      phone: createForm['phone'].value,
      address: createForm['address'].value
      
    }).then(() =>{
  
     //clear data
      document.getElementById('create-form').reset();
    })
  })

<form id="create-form">
                <h1 class="tigri">Прикачване на доктори</h1>
                <p>
                    <label>Name</label>
                    <input type="text" name="Name" id="name" required>
                </p>
                <p>
                    <label>Specialist</label>
                    <input type="text" name="Specialist" id="specialist" required>
                </p>
                <p>
                    <label>Phone</label>
                    <input type="text" name="Phone" id="phone" required>
                </p>
                <p>
                    <label>Image</label>
                    <input type="text" id="image">
                        
                </p>
                <p>
                    <label>Address</label>
                    <input type="text" name="Address" id="address" required>
                </p>
                <p class="full">
                    <button type="submit">Създаване на доктори</button>
                </p>      
            </form>
        </div> 

И вот как я отображаю это на странице:

const guideList = document.querySelector('.guides');

const setupGuides = (data) => {

let html = ' ';
data.forEach(doc => {
   const guide = doc.data();
   table= `
        <table style="display: inline; border-spacing: 20px 3px; line-height: 2;">
            <span class="close-x admin" style="display: none"</span>
            <tr>
                <td style="text-align: center"><img src="${guide.image}" height="200" width="180" object-fit: contain;></td>
            </tr>
            <tr>
                <th style="text-align: center">${guide.name}</th>
            </tr>
            <tr style=""padding-top:20px;>
                <td style="text-align: center">${guide.specialist}</td>
            </tr>
            <tr>
                <td style="text-align: center">${guide.phone}</td>
            </tr>
            <tr>
                <td style="text-align: center">${guide.address}</td>
            </tr>
            
    </table>
   `;
   html += table;
 });
    guideList.innerHTML = html;
}