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);