SharePoint List to HTML Table to TableExport.js

I'm using the TableExport.js API and PNP.js to pull data from a SharePoint list and display it on a Webpage and then have the options to export it into a Excel/CSV/Txt file.

Homepage: Shows the headings and also the data it's pulling in.

On Export: On export it's only exporting the headings and not the data below it.

Possible issue: The ExportTable function is only catching the table variable var table = $('<table id="TablePanel" style="width:100%" border="1 px"><thead style="padding-top: 10px"><tr><td>DMA</td>' + '<td>Rank</td>' + '<td>Franchises</td>' + '</tr></thead><tbody>'); within roadMapDisplay and not all the items beng included.

Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.5/css/tableexport.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.js.map"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.5/js/tableexport.min.js"></script>

<style>
.top {
    margin-bottom: 15px;
}
.csv, .txt, .xls, .xlsx {
    margin-right: 4px;
    margin-left: 4px;
}
</style>

<div id="title" style="width: 100%"></div>

<script>
$(document).ready(function(){
    $pnp.setup({
        baseUrl: "https://fh126cloud.sharepoint.com/sites/FH_HomeInsteadCRM/"
    });

    $pnp.sp.web.lists.getByTitle("Test").items.get().then(function(items) {
        console.log(items);
        var result = items.map(item => {
            return {
                Title: item.Title,
                Rank: item.Rank,
                Franchises: item.Franchises,
            }
        });
        var $table = roadMapDisplay(result);
        console.log($table);
        $('#title').html($table);
        ExportTable();
    });

    function roadMapDisplay(items) {
        var table = $('<table id="TablePanel" style="width:100%" border="1 px"><thead style="padding-top: 10px"><tr><td>DMA</td>' + '<td>Rank</td>' + '<td>Franchises</td>' + '</tr></thead><tbody>');
        items.forEach(item => {
            table.append(`<tr>`);
            table.append(`<td>${item.Title}</td>`);
            table.append(`<td>${item.Rank}</td>`);
            table.append(`<td>${item.Franchises}</td>`)
            table.append(`<tr/>`);
            table.append(`</tbody>`);
        });
        return table;
    }

    function ExportTable(){
        $("table").tableExport({
            headings: true,
            footers: true,
            formats: ["xls", "csv", "txt"],
            fileName: "id",
            bootstrap: true,
            position: "top",
            ignoreRows: false,
            ignoreCols: false,
            ignoreCSS: ".tableexport-ignore"
        });
    }
});
</script>