async function invoiceToHTMLRow(invoice) {
  // let balance = await Balance(Invoice.invoiceNo)
  //   console.log('this',balance)
    return `<tr> 
<td> ${invoice.customerId} </td>
<td id ='invNo'> ${invoice.invoiceNo} </td>
                 <td> ${invoice.amount} </td>
                  <td> ${invoice.customerName} </td>
                  <td> ${invoice.invoiceDate} </td>
                  <td> ${invoice.dueDate} </td>
                  <td> ${await Balance(invoice.invoiceNo)} </td>     
    </td>
                 <td>
                     <i class = "fa-Balance"onclick="showBalance('${invoice.invoiceNo}')" > Balance </i>

<i class = "fa-fa-edit"onclick="updateInvoice('${invoice.invoiceNo}')" > Edit </i>
<i class="fa-trash" onclick="deleteInvoiceFromTable('${invoice.invoiceNo}')"> Delete </i>
</td>
   </tr>`
    async function showBalance(invoiceNo) {
        const invoice = await repo.getInvoiceByNo(parseInt(invoiceNo))
        const number = document.querySelector('#invNo').value = invoice.invoiceNo
        const BTN =  document.getElementById('balanceBtn');
        BTN.innerHTML = `${await Balance(number)}` 
    }
      

so on my html page i get 3 balance buttons but when i click on one of them the value of the first button changes even if i clicked on the other ones [1]: https://i.stack.imgur.com/Az79C.png how to target the button that i clicked on? ty