Create a table with JSON data in HTML

Question

I currently have a JSON file that's getting me data into an HTML file. I also have it in a table currently. However, I need to get into a different type of table and I'm wondering how I can do that?

Current table:

JS:

$(function() {

    var records = [];

    $.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
        $.each(data.records, function parseJSON(i, { fields: f }) {
            var tblRow = "<tr>" + "<td>" + f.company + "</td>" + "<td>" + f.companyDescription + "</td>" + "<td>" + f.role + "</td>" + "<td>" + f.roleDescription + "</td>" + "</tr>"
            $(tblRow).appendTo("#jobslist tbody");
            $(tblRow).appendTo("#p");
        });
    });
});

HTML:

<table id="jobslist" border="2">
    <thead>
        <th>Company</th>
        <th>Company Description</th>
        <th>Role</th>
        <th>Role Description</th>
    </thead>
    <tbody>
    </tbody>
</table>

And I'm trying to get the data into their respective field this HTML table:

<table class="table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Company</th>
            <th scope="col">Role</th>
            <th scope="col">Location</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="jobslist">
        <tr>
            <td style="padding-top: 3%; padding-bottom: 3%;"><img src="img/logo1.png" style="width: 30px;"></td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Company Name</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Sr. Software Developer</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Durham, NC</td>
            <td style="padding-top: 3%; padding-bottom: 3%;"><a href="job"><img src="img/arrow.svg" height="25px"></a></td>
        </tr>
        <tr>
            <td style="padding-top: 3%; padding-bottom: 3%;"><img src="img/logo1.png" style="width: 30px;"></td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Company Name</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Jr. UX Desiner</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Raleigh, NC</td>
            <td style="padding-top: 3%; padding-bottom: 3%;"><a href="job"><img src="img/arrow.svg" height="25px"></a></td>
        </tr>
        <tr>
            <td style="padding-top: 3%; padding-bottom: 3%;"><img src="img/logo1.png" style="width: 30px;"></td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Company Name</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Data Scientist</td>
            <td style="padding-top: 3%; padding-bottom: 3%;">Cary, NC</td>
            <td style="padding-top: 3%; padding-bottom: 3%;"><a href="job"><img src="img/arrow.svg" height="25px"></a></td>
        </tr>
    </tbody>
</table>

Any help is greatly appreciated as I would like to understand how I can get this looping table rows of JSON data into this table. Thanks.