JSFiddle - React, Tailwind, and code Playground

HTML

<table id="dataTable">
    <tr>
        <th>Functional Category</th>
        <th>Brand Name</th>
        <th>When Obtained</th>
        <th>How Obtained</th>
        <th>How Often Worn</th>
        <th>Where It's Made</th>
        <th>Has a Graphic</th>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Monthly</td>
        <td>India</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>RVCA</td>
        <td>2 Years Ago</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Mexico</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>Dogfish Head</td>
        <td>Last 6 Months</td>
        <td>Gift</td>
        <td>Tri-Monthly</td>
        <td>Honduras</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Weekly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>Zine</td>
        <td>Last 3 Months</td>
        <td>Gift</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Long-sleeve</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Tri-Monthly</td>
        <td>Chicago</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Montly</td>
       ...

CSS

#dataTable {
    display:none;
}

JavaScript

var array = [];
    var headers = [];
    $('#dataTable th').each(function(index, item) {
        headers[index] = $(item).html();
    });
    $('#dataTable tr').has('td').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            arrayItem[headers[index]] = $(item).html();
        });
        array.push(arrayItem);
    });

alert(JSON.stringify(array));
//var testString = JSON.stringify(array);

//alert(testString);
//$("#holder").text(testString);
//testString.sort()
function compare(el1, el2, index) {
  return el1[index] == el2[index] ? 0 : (el1[index] < el2[index] ? -1 : 1);
}
array.sort(function(el1,el2){
  return compare(el1, el2, "Functional Category")
});
var section = $("section");
var headersString = '';  
for (var i=0; i < headers.length; i++) {  
    headersString += '<th>'+ headers[i] +'</th>';  
}
var table = $('<table border="1"><tr>'+headersString+'</tr>');

for (var j = 0; j < array.length; j++) {
    var currentHash = array[j];
    var tr = $('<tr>');
    for (var k in currentHash) {
        var td = $('<td>'+currentHash[k]+'</td>');
        td.appendTo(tr);
    }
    tr.appendTo(table);
}
table.appendTo(section);
//headers.sort();
/*
for (var i=0; i< headers.length; i++) {
    $("<th>"+headers[i]+"</th>").appendTo(table);
}
*/