how to fix datatable responsive bootstrap 5 delete button not working - google-apps-script

Question

I have a datatable responsive bootstrap 5 delete & Edit button working very good befor expended the row or click + on the table,
like this pic, after i click + and expended the table on mobile screen not workin like this pic see here. I'm not programmer and trying to do my page by Google Script, thux in advance
the code:
* Prevent forms from submitting.
* */
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", functionInit, true);
/**
* INITIALIZE FUNCTIONS ONLOAD
* */
function functionInit(){
preventFormSubmit();
getLastTenRows();
};
/**
* HANDLE FORM SUBMISSION
* */
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
// setTimeout(function() {$('#myModal').modal('hide');}, 10000);
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Added the record successfully.</div>";
document.getElementById("myForm").reset();
}
/**
* Clear form when pop-up is closed.
* */
function clearForm() {
document.getElementById("message").innerHTML = "";
document.getElementById("myForm").reset();
}
google.script.run.withSuccessHandler(createTable).getAllData();
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
document.getElementById('resp-spinner8').classList.remove("d-none");
document.getElementById('resp-spinner9').classList.remove("d-none");
document.getElementById('resp-spinner10').classList.remove("d-none");
function createTable(dataArray) {
$('#btn-close').click()
$(document).ready(function(){
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
document.getElementById('resp-spinner8').classList.add("d-none");
document.getElementById('resp-spinner9').classList.add("d-none");
document.getElementById('resp-spinner10').classList.add("d-none");
$('#dataTable').DataTable({
//data: dataArray,
data: dataArray.slice(1),
columns: [
{ title: "ID" },
{ title: "Name" },
{ title: "State" },
{ title: "Date" },
{ title: "Mobile No" },
{ title: "Address" },
{ title: "Remarks" },
{ title: "Edit", "render": function (data,type, row, meta){
return "<button type='button' class='btn btn-outline-warning btn-xs editBtn' data-toggle='modal' data-target='#myModal' onclick='editData(this);'><i class='fa fa-edit'></i></button>";
}
},
{ title: "Delete", "render": function (data,type){
return "<button type='button' class='btn btn-outline-danger btn-xs deleteBtn' onclick='deleteData(this);'><i class='fa fa-trash''></i></button>";
}
},
],
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
nRow.setAttribute('id',aData[0]);
},
// "ordering": false,
destroy:true,
responsive:true,
lengthMenu: [
[5, 10, 25, 50, 100, -1 ],
['5', '10', '25', '50','100', 'All' ]
],
order: [[2, "asc"], [2, "asc"], ],
});
});
}
/**
* DELETE DATA
* */
function deleteData(el) {
Swal.fire({
position:'top',
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Cencel',
confirmButtonText: 'Ok'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
)}
if (result.isDismissed) {
swal.fire("Cancelled!", "Files not deleted!", "warning");
console.log("Doing Nothing")
var recordId = el.parentNode.parentNode.cells[0].innerHTML;
google.script.run.withSuccessHandler(createTable).deleteData(recordId);
}
});
}
/**
* EDIT DATA
* https://stackoverflow.com/a/32377357/2391195
* */
function editData(el){
var recordId = el.parentNode.parentNode.cells[0].innerHTML;
google.script.run.withSuccessHandler(populateForm).getRecordById(recordId);
}
/**
* POPULATE FORM
* */
function populateForm(records){
document.getElementById('RecId').value = records[0][0];
document.getElementById('name').value = records[0][1];
document.getElementById('State').value = records[0][2];
document.getElementById('date').value = records[0][3];
document.getElementById('data1').value = records[0][4];
document.getElementById('data2').value = records[0][5];
document.getElementById('data3').value = records[0][6];
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Update Record [ID: "+records[0][0]+"]</div>";
}
/**
* RETRIVE DATA FROM GOOGLE SHEET FOR State DROPDOWN
* */
function createStateDropdown() {
//SUBMIT YOUR DATA RANGE FOR DROPDOWN AS THE PARAMETER
//Change to your sheet name and data range.
google.script.run.withSuccessHandler(StateDropDown).getDropdownList("State!A1:A4");
}
/**
* POPULATE State DROPDOWNS
* Ref: https://stackoverflow.com/a/53771955/2391195
* */
function StateDropDown(values) {
var list = document.getElementById('State');
for (var i = 0; i < values.length; i++) {
var option = document.createElement("option");
option.value = values[i];
option.text = values[i];
list.appendChild(option);
}
}
function loading(){
window.addEventListener("load", functionInit, false);
window.addEventListener("load", preventFormSubmitSearch, true);
}
</script>
<script>
$('#datatable').DataTable()
.columns.adjust()
.responsive.recalc();
<script>
$(document).ready(function () {
alert("Test");
});
</script>
</script>
<script src="~/lib/jquery/dist/jquery.js"></script>
i hope can sol