Untitled

<!Doctype HTML>
<html>
<head>
    <title></title>
    <Style type="text/css">
        .TestDiv
        {
            color: black;
            padding: 5px;
            margin: 5px;
            table-layout: fixed;

        }
        .tbl {
            border-collapse: collapsed;
        }
        .tbl td {
            border: 1px solid black;
            padding: 5px;
        }

        .BierDiv
        {
            color: black;
            padding: 5px;
            margin: 5px;
            table-layout: fixed;

        }
        .tblBier {
            border-collapse: collapsed;

        }
        .tblBier td {
            border: 2px solid black;
            padding: 5px;
        }


    </style>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">

    </script>

    <script>

        var oFields = [
            {veld: 'name', title: 'ID', zichtbaar: 'true'},
            {veld: 'capital', title: 'Capital', zichtbaar: 'true'},
            {veld: 'region', title: 'Region', zichtbaar: 'true'},
            {veld: 'subregion', title: 'subregion', zichtbaar: 'true'},
            {veld: 'population', title: 'population', zichtbaar: 'true'},
            {veld: 'timezones', title: 'timezones', zichtbaar: 'true'},
            ];
        function Checkbox(index_cb, cb) {
            console.log("checked");
            oFields[index_cb].zichtbaar = cb.checked;
            haalbier();
        }

        function haalbier() {
            console.log("Hallo");

                        $.get("https://restcountries.eu/rest/v2/all", function(data, status){
                            console.log(data);

                            var html = "";
                            $.each(oFields, function (i, obj) {
                                var chk="";

                                if(obj.zichtbaar){
                                chk="checked";
                                }
                                html += "<input type='checkbox' onclick='Checkbox("+i+", this)' "+chk+" />" +obj.title+"";

                                //else{ console.log("niet zichtbaar"); }
                            });
                            html += "<table class='tbl'>";
                            html += "<tr>";

                            $.each(oFields, function (i, obj) {
                                if(obj.zichtbaar){
                                html += "<th>" + obj.title + "</th>";
                                }
                            });
                            html += "</tr>";

                            $.each(data, function (i, biertje) {
                                html += "<tr>";
                                $.each(oFields, function (i, obj) {
                                    if(obj.zichtbaar){
                                    html += "<td> " + biertje[obj.veld] + "</td>";
                                    }
                                });
                                html += "</tr>";
                            });
                            html += "</table>";

                            $(".BierDiv").html(html);
                        });
        }

          $( document ).ready(function() {


                    $("#GetNames").click(function()
                    {
                        haalbier();
                    });


                });

    </script>
</head>
<body>

<h1>Bier Tabel</h1>
<div class="BierDiv"></div>
<br> <br>
<button id="GetNames">Tabel Ophalen</button>


</body>
</html>