Hey, I'm a beginner in the world of Javascript and currently working on creating a table using a select element with an array of dictionaries. The select element serves as a filter for the table values. However, my issue is that when I change the value of the select element to generate a new table, I want it to replace the previous one instead of adding to a long list of tables. Here's the snippet from my onchange event:
const filteredTable = document.getElementById("candidates_example");
const newFilteredTable = filteredTable.cloneNode(true);
removeRowsFromTable(newFilteredTable);
const filteredTbody = newFilteredTable.getElementsByTagName('tbody')[0];
const filterSelection = document.getElementById("filterSelect").value;
const selectFilter = filterCandidateBySkill(newCandidates, filterSelection)
addCandidatesToTable(filteredTbody,selectFilter);
document.body.appendChild(newFilteredTable);
I've attempted to search online for solutions but due to my limited knowledge in Javascript terminology, I am not sure what exactly to ask. Appreciate any guidance or assistance provided.