How to add unique class to dynamically created elements by document.createElement - ajax

Question

I have JSON response text being output to a table. The table is created dynamically.
How do I alter the code so each th and td elements that is generated gets a unique class name assigned? The class names should not change when the script is reloaded. th x 5 and td x 5
function loadAnalysis() {
var xhttp = new XMLHttpRequest();
var url = document.getElementById("url").value;
if (url == "") {
alert("Please enter URL");
return;
}
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var data = this.responseText;
var jsonResponse = JSON.parse(data);
console.log(jsonResponse["lighthouseResult"]);
var table = document.createElement('table');
table.setAttribute('class', 'result');
var properties = ['performance', 'accessibility', 'best-practices', 'seo', 'pwa'];
var capitalize = function(s) {
return s.charAt(0).toUpperCase() + s.slice(1);
}
var tr = document.createElement('tr');
for (var i = 0; i < properties.length; i++) {
var th = document.createElement('th');
th.appendChild(document.createTextNode(capitalize(properties[i])));
tr.appendChild(th);
}
table.appendChild(tr);
var tr, row;
console.log("jsonResponse", jsonResponse);
var categories = Object.keys(jsonResponse["lighthouseResult"]);
for (var r = 0; r < categories.length; r++) {
tr = document.createElement('tr');
row = jsonResponse["lighthouseResult"][categories[r]];
for (var i = 0; i < properties.length; i++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(row[properties[i]].score));
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('analysisTable').appendChild(table);
}
};
xhttp.open("GET", "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" + encodeURIComponent(url) +
"&fields=lighthouseResult%2Fcategories%2F*%2Fscore&prettyPrint=false&strategy=desktop&category=performance&category=pwa&category=best-practices&category=accessibility&category=seo&key=AIzaSyDSNxhf0capOwppqlg9wZJUvzBewxf6mHU", true);
xhttp.send();
}

Answer 1

Maybe not the cleanest way of coding but it did the trick for me as a javascript noob
For th elements:
th.classList.add("category");
For td elements:
var ids = 'performance,accessibility,best-practices,seo,pwa'.split(',');
for (var i = 0; i < properties.length; i++) {
    var td = document.createElement('td');
    td.id = ids[i];