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)}` }

entonces, en mi página html, obtengo 3 botones de saldo, pero cuando hago clic en uno de ellos, el valor del primer botón cambia incluso si hice clic en los otros [1]: https://i.stack.imgur.com/Az79C .png ¿cómo apuntar al botón en el que hice clic? ty