AG-GRID confirmation box for editables fields

i’ve been trying to create a function that opens a confirmation box whenever the user tries to change the value of the editable fields but i am getting some issues with the method that i used, for exemple; i used setDataValue() to change back the value when the user clickes Discard Changes, but this method changes the value of multiple rows sometimes. Is there a better way to do this?

html

<div class=”modal modal-anes” tabindex=”-1″ role=”dialog” id=”anes-confirmation” data-keyboard=”false” data-backdrop=”static”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title”>Modal title</h5>
</div>
<div class=”modal-footer”>
<button id=”commitChanges” class=”btn btn-primary”>Save change</button>
<button id=”cancelChangesBtn” class=”btn btn-secondary”>Discard Change</button>
</div>
</div>
</div>
</div>

Js

const gridOptionsQuality = {
defaultColDef: {
flex: 1,
minWidth: 150,
resizable: true,
filter: true,
floatingFilter: true,
sortable: true,
},
rowData: ObjData,
pagination: true,
paginationPageSize: 10,
animateRows: true,
onCellValueChanged: (event) => {
var displayModel = gridOptionsQuality.api.getModel();
var rowNode = displayModel.rowsToDisplay[event.rowIndex];

var column = event.column.colDef.field;
var action = rowNode.data.action

$( document ).ready(function() {
$(“#modal”).modal(“show”);
});

let oldValue = event.oldValue;
let newValue = event.newValue;

let cancelBtn = document.getElementById(“cancelChangesBtn”)
let commitBtn = document.getElementById(“commitChanges”)

cancelBtn.addEventListener(“click”, () => {
// For some reason sometimes setDataValue() selects more than one rowNode, so cancelBtn is clicked more than one value changes.
rowNode.setDataValue(‘anes_provider’, oldValue);
closeModal();
})

commitBtn.addEventListener(“click”, () => {
// Ajax request to change the values on the database(this part i can manage)
})
},
};

(gridOptionsQuality.columnDefs = [
{ headerName: “Action”, field: “action” },
{
headerName: “Image Batch ID#”,
field: “image_batch_id”,
editable: true,
cellStyle: () => {
return { border: “2px solid #66b1eb” };
},
},
{
headerName: “Notes”,
field: “notes”,
editable: true,
cellStyle: () => {
return { border: “2px solid #66b1eb” };
},
},
{
headerName: “Procedure Date”,
field: “procedure_date”,
editable: true,
cellStyle: (params) => {
return { border: “2px solid #66b1eb” };
},
},
{
headerName: “Anes Provider”,
field: “anes_provider”,
editable: true,
},
]);