i have a list of transaction, displayed on browser. i have to to add confirmation button when the user click on delete button, but whetever button i click, it returns the id of the first element innstead of the current button. any idea please ? PS: I used daisy ui modal dialog

a part of the code looks like :

            <tbody>
              {/* row 1 */}
              {budget?.transactions &&
                budget?.transactions.map((transaction) => {
                  return (
                    <tr key={transaction.id}>
                      .....
                      //THIS BUTTON WORKS FINE: IT PRINTS THE ID
                        <button
                          type="button"
                          className="btn btn-error"
                          id={transaction.id}
                          onClick={
                            () => {
                              console.log("delete transaction : ");
                              console.dir(transaction.id);
                            }
                            //handleDeleteTransaction
                          }
                        >
                          delete
                        </button>
                        <div>
                          <button
                            className="btn btn-sm"
                            onClick={() =>
                              (
                                document.getElementById(
                                  "my_modal_4"
                                ) as HTMLDialogElement
                              ).showModal()
                            }
                          >
                            <Trash className="w-4 h-4" />
                          </button>
                          <dialog id="my_modal_4" className="modal">
                            <div className="modal-box">
                              <form method="dialog">
                                {/* if there is a button in form, it will close the modal */}
                                <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
                                  ✕
                                </button>
                              </form>
                              <h3 className="font-bold text-lg">Hello!</h3>
                              <p className="py-4">
                                are you sure to delete the transaction ?
                              </p>
                              <div className="flex justify-end">
                                // BUT THIS BUTTON RETURNS ALWAYS THE ID OF 1ST ELEMENT, WHY ?
                                <button
                                  type="button"
                                  className="btn btn-error"
                                  id={transaction.id}
                                  onClick={
                                    () => {
                                      
                                      console.dir(transaction.id);
                                    }
                                    
                                  }
                                >
                                  delete
                                </button>
                           ....
                    </tr>
                  );
                })}
            </tbody> 

i am using nextJs with daisyui modal dialog. I have used 2 Buttons for the same purpose, one it prints the ID of currnet transaction, and the 2nd prints always the the ID of the first item (see my comments above in capitals)

Any help please how to fix ?