<div id="div1">
</div>
<script type="text/javascript">
function drawTable(data){
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData){
var tbl = $("<table>").addClass("tbl1");
var row = $("<tr />");
$("#tbl1").append(row);
row.append($("<td align='center'>" + rowData.id + ".</td>"));
row.append($("<td>" + rowData.naam + "</td>"));
row.append($("<td>" + rowData.brouwer + "</td>"));
row.append($("<td align='center'>" + rowData.type + "</td>"));
row.append($("<td>" + "$" + rowData.inkoop_prijs + "</td>"));
row.append($("<td>" + (rowData.perc * 100).toFixed(2) + "%" + "</td>"));
$("#div1").append(tbl);
tbl.append(row);
}
function loadBier() {
$.getJSON( "https://15euros.nl/api/bier_basic.php",
function( data ) {
console.log("AJAX-data through jQuery:12", data);
$("#div1").append( drawTable(data));
}
);
}
loadBier();
</script>
im trying to create one table but instead it creates tons of tables how to fix it