Duplicate Section

I have a generated table elements that I get from my Google Spreadsheet and in each table will have generated button that will pop up modal from Bootstrap.

What I want to achieve is whenever I click the button depend on the row, I want to get that row number and change data in Google Spreadsheet. For example clicking button in first row will pop up a confirmation modal, if I click “YES” button using my modal it then will change data in first row of the Spreadsheet and return “row 1” in the console. My problem is if I click button row 1, then close the modal after it pop up, then click button in row 2 and click “YES”, the code somehow duplicate and return result “row 1 ” and “row 2” but what I want is “row 2” only.

As image above, I click button row number 1, console will show 1, then I close the modal and then click button row 2, console will show 2 but when I click “YES” on my modal, console will show 1 and 2 but what I want is only 2.

This issue will cause sending duplicate email because my code also include Mailapp services.

Any solution or advice?

Modal and Table HTML

    <!-- Modal Cancel Leave Application -->
    <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Leave Cancellation</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="edit__title">Current Leave Application</p>
            <p class="edit__subtitle" id="currentApplication2"></p>
            <p class="edit__subtitle" id="currentDateApplication2"> Date : #currentDate</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="cancelConfirm">YES</button>
            <button class="btn btn-primary hide" type="button" id="btndisabledCancel" disabled>
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              Cancelling...
            </button>
          </div>
        </div>
      </div>
    </div>

      <div id="manageLeaveSection" class="hide">
        <main class="manage__main">
          <section>
            <h2 class="manage__title">Manage Leave</h2>
            <div class="upcoming__leave">
                <div class="upcoming__header">
                  <table class="table__design" id="manageTable">
                    <thead>
                      <tr class="tr__design">
                        <th class="th__design">From</th>
                        <th class="th__design">Until</th>
                        <th class="th__design">Type Of Leave</th>
                        <th class="th__design">Status</th>
                      </tr>
                    </thead>
                    <tbody id="manageTableBody">

                    </tbody>
                    </table>
                  </div>
                </div>
          </section>
        </main>
      </div>

JS generated table. DataArray are data from Google Spreadsheet.

  const table = document.getElementById("manageTable");
  const newList = document.getElementById("manageTableBody");
  const confirmCancelButton = document.getElementById("cancelConfirm");
  let actualRowNum;
  let displayRowNum;

  dataArray[0].forEach(function(r){

    const row = document.createElement("tr");
          row.classList.add("tr__design");

      const col5 = document.createElement("td");
            col5.classList.add("td__design");
          
          // Get display table row number
          const getDisplayRow = table.rows.length;
          
          const cancelBtn = document.createElement("a");
                cancelBtn.innerHTML = "Cancel";

            // Cancel Button Protocol
            if(col3x.innerHTML === "Cancelled" || col3x.innerHTML === "Rejected"){
              cancelBtn.classList.add("disabled__btn");
            }else if(today >= checkDate){
              cancelBtn.classList.add("disabled__btn");
            }
            else{
              cancelBtn.classList.add("cancel__btn");
              cancelBtn.setAttribute("data-bs-toggle", "modal");
              cancelBtn.setAttribute("data-bs-target", "#cancelModal");
              cancelBtn.set
            }
            
            col5.appendChild(cancelBtn);

        // Click Cancel Button
        var setValue = getDisplayRow;
        cancelBtn.addEventListener('click',function(){
          document.getElementById("currentApplication2").innerHTML = `Leave Application :  ${r[1]}`;
          document.getElementById("currentDateApplication2").innerHTML = `Date : ${r[4]} - ${r[5]}`;
          
          console.log(setValue);//will log row number[in this case is 1]
          
          //Assign row number for every generated rows
            actualRowNum = dataArray[1][getDisplayRow-1];
            testNum = getDisplayRow;

              confirmCancelButton.addEventListener('click',function(){  

                console.log(setValue);
                
                    google.script.run
                    .withSuccessHandler(function(){
                      removeModal();                    
                    })
                     .cancelLeave(actualRowNum,setValue)
              });

        });

    row.appendChild(col5);
    newList.appendChild(row);