I have 2 buttons, one to add 1 and another to subtract 1, but I'd like it so that it changes a Firebase field's value accordingly to the buttons pressed. How?

button and show code:

<button style="display:inline;position:absolute;left:45%;top:38px;" name="add" value="1">+</button>
<h1 id="count" style="display:inline;position:absolute;left:50%;"></h1>
<button style="display:inline;position:absolute;left:55%;top:38px;" name="sub" value="-1">-</button>

Code to update (I have tried changing stuff, but as of now it doesn't work and I don't know what way I should be going to reach my goal. Also, I followed a tutorial. I am trying to make 1 button add 1 to the "counter" field and another subtract 1 from it.)

const updateForm = document.querySelector('.update')
updateForm.addEventListener('submit', (e) => {
  e.preventDefault()

  let docRef = doc(db, 'count', updateForm.add.count[0])

  updateDoc(docRef, {
      counter: 2
    })
    .then(() => {
      updateForm.reset()
    })
})

Count[0] is coming from this code:

onSnapshot(colRef, (snapshot) => {
    let count = []
    snapshot.docs.forEach((doc) => {
        count.push({ ...doc.data(), id: doc.id })
    })
    document.getElementById("count").innerHTML=count[0].counter;
})

(The code is adapted to work for more than 1 field, but I only use 1. That is because I followed a tutorial as mentioned above.)