JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table" border="1"> 
    <tbody style="display: table-row-group">
    </tbody>
</table>

JavaScript

jQuery(document).ready(function(){

$.support.cors = true;

var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22EURUSD%22%2C%20%22CADUSD%22%2C%20%22GBPUSD%22%2C%20%22AEDUSD%22%2C%20%22TRYUSD%22%2C%20%22RUBUSD%22%2C%20%22INRUSD%22%2C%20%22SARUSD%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";

var $tbody = $('#table').find('tbody');
var $thead = $('#table').find('thead');

$.ajaxSetup({ cache: false });

$.ajax({
    crossDomain: true,
    type: "GET",
    url: url,
    cache: false
}).done(function (data) {
    alert("lev 2 ");
    var ObjectKeys = Object.keys(data.query.results.rate[0]);
    var row = "<tr>";
    row += "</tr>";
    $thead.append(row);

    $.each(data.query.results.rate, function (i, el) {
        console.log("lev 3 = " + i);
        $tbody.append($('<tr />').append($('<td />').text(el.id)).append($('<td />').text(el.Name)).append($('<td />').text(el.Rate)).append($('<td />').text(el.Ask)).append($('<td />').text(el.Bid)));
    });
});
 
    
    
});