Javascript help me pleas

<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

That is because the for loop inside your drawTable function calls drawRow function for each object element of the data array. Your drawRow function creates a table each time it is called.

You need to create a single table element in the drawTable function and your drawRow function should only append row and column elements to the table you create in the drawTable function each time it is called.