I am using firebase firestore database vesion 9 . I am working on a Notes App project and what i am trying to do here is that whenever i click on new note the new note gets created with empty content in database and i want to fetch its id to show on top of note. Here is the code of the Problem I am facing:-

    let docId;
    addDoc(colref,{
    notes: "",
    EditedAt: serverTimestamp()
    })
     .then((el)=>{
                 docId = el.id;
                 console.log(docId)
                 })
     .catch(err=>{
                 console.log(err.message);
                 })

note.classList.add('note')
note.innerHTML = `
<div class="tools">
<span class="doc-id">${docId}</span>
    <button class="edit"><i class="fas fa-edit"></i></button>
    <button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main ${text ? "" : "hidden"}"></div>
<textarea class="${text ? "hidden" : ""}"></textarea>
`
document.body.appendChild(note)