Utilizing a JSON object, I am generating a table with associated values and including a remove button for each entry:
for (var keyValue in thisAdminResult) {
if (thisAdminResult.hasOwnProperty(keyValue)) {
var row = document.createElement('tr');
var firstColumn = document.createElement('td');
var secondColumn = document.createElement('td');
var thirdColumn = document.createElement('td');
var fourthColumn = document.createElement('td');
var password = document.createElement('input');
password.type = "password";
var removeButton = document.createElement('input');
removeButton.type = "button";
var updateButton = document.createElement('input');
updateButton.type = "button";
firstColumn.appendChild(document.createTextNode(keyValue));
password.value = thisAdminResult[keyValue];
secondColumn.appendChild(password);
removeButton.value = 'remove';
removeButton.onclick = function () {
remove(keyValue);
}
thirdColumn.appendChild(removeButton);
updateButton.value = 'update'
updateButton.onclick = function () {
//update(keyValue);
}
fourthColumn.appendChild(updateButton);
row.appendChild(firstColumn);
row.appendChild(secondColumn);
row.appendChild(thirdColumn);
row.appendChild(fourthColumn);
table.appendChild(row);
}
}
The issue I'm facing is that when I click on any remove button, it always triggers the remove function with the same argument value (the last value of the 'keyValue' variable).
If anyone knows how to fix this problem, please advise.