example.html

<tr>
            <td class="DetailEditNoBorder" colspan="6">
                <table class="table  table-sm" style="border-color:#000; margin-right:auto; margin-left:auto; max-width:576px">
                    <thead style="background-color:#C0C0C0">
                        <tr>
                            <th>CallDate
                            </th>
                            <th>ImportedAt
                            </th>
                            <th>Audio
                            </th>
                        </tr>
                    </thead>
                    <tbody id="recordings-tbody" style="background-color:white">

                    </tbody>
                </table>
            </td>

        </tr>

example.js

 /*
        Recordings
        */
        (function () {
         // This variable needs to be changes to ControlNumber or cn depending on the landing page
         // we pass this variable to ms1 to attain all recordings - its possible we have none on file.
         
            var PartnerPrimaryOrderID = getQueryVariable('ppoi');
            var url = 'http://ms1.agentgrid.net/api/tagnet/RecordingsByPro?PartnerPrimaryOrderID=' + PartnerPrimaryOrderID;
            // XHR Options
            var options = {
                type: 'GET',
                url: url,
                dataType: 'json',
                success: success,
                error: error
            };
            // XHR Success
            function success(res) {
                // Handle JSON

                // Check for SQL error
                if (res.error == true) {
                    // Display error 
                    // todo: handle error
                    return;
                }
                var data = res.data;
                var tbody = $("#recordings-tbody");
                var len = data.length - 1;
                if (res.data.length > 0) {
                    var html = "";
                    res.data.forEach(function (e, i, a) {
                        html += '<tr>';


                        html += '<td>';
                        html += e.Calldate.split('T')[0];//+" " +e.Calldate.split('T')[1].split('.')[0];
                        html += '</td>';
                        html += '<td>';
                        html += e.Imported.split('T')[0] + " " + e.Imported.split('T')[1].split('.')[0];
                        html += '</td>';
                        html += '<td>';
                        //html += '<audio controls>';
                        //html += '< source src= "http://ea42a9825f965576a3f9-ba4b2f0739ede3ba575ebb9ce1fdd05c.r44.cf2.rackcdn.com/queue/' + e.Uniqueid + '.wav" type= "audio/wav" >';
                        //html += '</audio>';
                        html += '<a href="http://ea42a9825f965576a3f9-ba4b2f0739ede3ba575ebb9ce1fdd05c.r44.cf2.rackcdn.com/queue/' + e.Uniqueid + '.wav" target="_blank">Listen now</a>';
                        html += '</td>';
                        html += '</tr>';
                        if (i == len) {
                            tbody.html(html);
                        }
                    });
                }

            }
            // XHR Error
            function error(err) {
                // Handle XHR error
                // todo: handle error
            }
            $.ajax(options);

        })()