Why are my row/cell changes in Tabulator applied to both old and new rows/cells? - tabulator

Question

I am attempting to react to a cellEdited event in Tabulator by: (a) copying the modified row to a new row; and (b) restoring the cell value in the modified row.
My Tabulator instance is coded as follows:
function TabulatorInvitees(divId, companyName) {
try {
var table = new Tabulator(divId, {
columns: [
{
title: "<div style='width:20%; float:left; text-align:left; color:blue; font-size:14px;'>Vendor Invitees</div>",
columns: [
{ title: "DbId", field: "DbId", visible: true },
{ title: "Added", field: "Added", visible: true },
{ title: "Changed", field: "Changed", visible: true },
{ title: "Marked For Exclusion", field: "MarkedForExclusion", visible: true },
{
title: "Email Address",
field: "Email",
widthGrow: 1,
responsive: 0,
hozAlign: "center",
editor: "input",
visible: true,
cellEdited: function (cell) {
// When an email address has been changed the former record needs to be marked for exclusion and a new record needs to be added.
// Step #1: Copy the edited row to a new row and modify the [DbId] and [Added] columns.
let refTable = cell.getTable();
let row = cell.getRow();
refTable.addRow({}, true).then((newRow) => {
newRow.update(row.getData()); // Paste a copy of the data from the edited row.
newRow.update({ DbId: 0, Added: true });
})
// Step #2: Restore the original value to the edited row.
cell.restoreOldValue();
}
},
{
title: "First Name",
field: "FirstName",
widthGrow: 0.5,
responsive: 1,
hozAlign: "center",
editor: "input",
visible: true,
cellEdited: function (cell) {
cell.getRow().update({ Changed: true });
}
},
{
title: "Last Name",
field: "LastName",
widthGrow: 0.5,
responsive: 1,
hozAlign: "center",
editor: "input",
visible: true,
cellEdited: function (cell) {
cell.getRow().update({ Changed: true });
}
}
]
},
{
title: tabulatorAddUserIcon(companyName),
field: "ManageRows",
widthGrow: 0.25,
responsive: 2,
hozAlign: "center",
formatter: "tickCross",
headerClick: function (e, row) {
row.getTable().addRow({ DbId: 0, Added: true }, false);
},
cellClick: function (e, cell) {
tabulatorFreezeUnfreezeDelete(cell.getRow());
}
},
],
data: [],
height: "100%",
layout: "fitColumns", // required when using 'widthGrow'
placeholder: tabulatorPlaceholder(companyName), //display message to user on empty table
reactiveData: true, //enable reactive data
responsiveLayout: "collapse",
rowContextMenu: tabulatorContextMenu(),
});
table.on("rowTapHold", function (e, row) {
// from Tabulator documentation: "The rowTapHold event is triggered when a user taps on a row on a touch display and holds their finger down for over 1 second."
//e - the tap event object
tabulatorContextMenu();
});
table.on("tableBuilt", function () {
if (companyName.length > 0) {
table.setData(getDataSync({ caseSelector: "VendorMgmt_EmployeeList", companyCode: companyName, userEmail: graphMail }));
}
else {
table.setData([]);
}
});
}
catch (error) {
console.log(error);
}
}
Specifically, any time an [Email Address] is edited the original version must be preserved and marked as excluded. My remedy is to copy the edited version of the row into a new Tabulator row then reverse the edits to the original row (thus preserving its contents).
The following screenshot shows the initial state of the Tabulator instance after data has been retrieved from a local database using the setData() method.
The following screenshot shows the original [Email Address] (jane.doe#gmail.com) having been modified (jane.doe#yahoo.com):
The anticipated behavior is that a new record will be inserted into the table (jane.doe#yahoo.com) and the edited row will be restored using the restoreOldValue() method.
By removing the restoreOldValue() method, I can readily see the contents of the modified row have been copied to a new row. So far, so good....
The new row is added with the new [Email Address], as anticipated.
My problem arises when the restoreOldValue() method is invoked on the [Email] cell of the edited row. The restored/original value is applied to both the new row and the edited row, as follows:
Instead of having a new row for "jane.doe#yahoo.com" and an original row for "jane.doe#gmail.com" I now have two rows for "jane.doe#gmail.com".
I feel as though there should be a simple fix but I have yet to find it. Any assistance is greatly appreciated.