JavaScript Table isn't showing on screen

Hello I'm trying to create a little store but I can't seem to get my shopping cart to work. I want the user to be able to press a shopping bag icon and get a list of what is in their shopping cart. If they want, they can delete the object out of the shopping cart. However, I'm stuck because it won't load the items into the shopping cart. Will someone please help me understand what I'm doing wrong?

js:

    function showWinkelmandje() {
        console.log("winkelmandje.onclicked;");
        console.log(document.getElementById("winkelmandje_knop"));
        //Winkelmandje aan- of uitzetten
        if(document.getElementById("winkelmandje_knop").checked) {
            document.getElementById("winkelmandje").style.visibility = "visible";
            document.getElementById("rijen").style.visibility = "visible";
        }else{
            document.getElementById("winkelmandje").style.visibility = "hidden";
            document.getElementById("rijen").style.visibility = "hidden";
        }
        var rijen = "<table><th>Titel</th><th>Artiest</th>" + "<th>Genre</th><th>Prijs</th><th>Aantal</th><th>Delete</th>";
        var rij = "";
        var lus = document.getElementById("lus").value;
        for(var x=0; x<lus; x++) {
            if(document.getElementById("aantal["+ x +"]").value==0) continue;
            rij="<tr>";
            titel = document.getElementById("titel["+ x +"]").value;
            artiest = document.getElementById("artiest["+ x +"]").value;
            genre = document.getElementById("genre["+ x +"]").value;
            prijs = document.getElementById("prijs["+ x +"]").value;
            aantal = document.getElementById("aantal["+ x +"]").value;
            rij += "<td width='120'>" + titel + "</td>" + 
                    "<td>" + artiest + "</td>" +
                    "<td>" + genre + "</td>" +
                    "<td>" + prijs + "</td>" +
                    "<td>" + aantal + "</td>" +
                    "<td onclick='deleterij(" + x + ");'>&#10008;</td></tr>";
            rijen += rij;
        }
        rijen += "</table";
        document.getElementById("rijen").innerHTML =  rijen;
    }
    function deleterij(id){
        verwijder = confirm("Wil je " + document.getElementById("titel[" +id+"]").value + " verwijderen?");
        if(verwijder) {
            document.getElementById("aantal["+ id + "]").value = 0;
            showWinkelmandje();
        }
    }


php:

    <?php 
    if(!isset($_SESSION["ID"])&&($_SESSION["STATUS"]!="ACTIEF")) {
        echo "<script>alert('U heeft geen toegang tot de pagina'); location.href='../index.php';</script>";
    }
    ?>
    <!-- dit is het zoek formulier -->
<!-- this is where the searchbar is -->
    <script src="js/webshop.js"></script>
    <div class="content">
        <form name="search" id="search" action="" method="POST">
            <div style="background-color: #C2F98E; height: 25px; margin-top: 5%; padding: 0;">
            <input type="text" style="float: left; width: 70%;" id="patroon" name="patroon" placeholder="Zoek albums"/>
            <input type="submit" style="float: none; width: 10%; font-size: 1.2rem;" id="zoeken" value="&#128269;" /><br>
            </div>
        </form>
    </div>
    <?php
    // this is where I'm trying to make the search bar dynamic however it doesnt seem to want to search my albums
        //Hier wordt de sql opdracht gegenereerd
        if(isset($_POST["zoeken"])&& !empty($_POST["patroon"])) {
            $patroon = htmlspecialchars($_POST["patroon"]);
            $sql = "SELECT * FROM album WHERE titel LIKE '%$patroon%' || artiest LIKE '%$patroon%' || genre LIKE '%$patroon%'";
        }else{
            $sql = "SELECT * FROM album LIMIT 3";
        }
    ?>
    <div class="content">
    <form name="webshop" id="webshop" action="index.php?page=bestellen" method="POST">
    <?php
    // Dit is het bestel formulier met albums uit de db
        $stmt = $verbinding->prepare($sql);
        $stmt->execute();
        $albums = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $lus = 0;
        foreach($albums as $album) {
            echo "<img width='100px' src='img/". $album['cover']."'/>";
            echo "<input type='hidden' name='id[$lus]' id='id[$lus]' value'".$album['ID']. "' />";
            echo "<input type='hidden' name='titel[$lus]' id='titel[$lus]' value'".$album['titel']. "' />";
            echo "<input type='hidden' name='artiest[$lus]' id='artiest[$lus]' value'".$album['artiest']. "' />";
            echo "<input type='hidden' name='genre[$lus]' id='genre[$lus]' value'".$album['genre']. "' />";
            echo "<input type='hidden' name='prijs[$lus]' id='prijs[$lus]' value'".$album['prijs']. "' />";
            echo "<br> titel:". $album["titel"] . "prijs: " . $album["prijs"];
            echo "<br> Voorraad:". $album["voorraad"];
            echo "<br>Aantal:";
            echo "<input class='aantal' type='text' style='width: 10%; name='aantal[$lus]' id='aantal[$lus]' value='0' />";
            echo "<hr />";
            $lus++;
    
        }
        echo "<input type='hidden' name='lus' id='lus' value'".$lus."'/>";
    ?>
<!-- this is the shooping cart-->
    <!--winkelmandje aan- en uitzetten -->
    <input type="checkbox" name="winkelmandje_knop" id="winkelmandje_knop" onclick="javascript:showWinkelmandje();" class="icon" value=&#128717;/>
    <label for="winkelmandje_knop">&#128717;</label>
    <br>
        <div class="icon_container">
            <input type="submit" class="icon" id="submit" name="submit" value="&rarr;" />
        </div>
    <br>
    </form>
    </div>
    <!--winkelmandje-->
    <div id="winkelmandje">
         <div id="rijen"></div>
         <input type="checkbox" id="winkelmandje_knop" onclick="javascript:showWinkelmandje();" class="icon" value="X" />
         <label for="winkelmandje_knop" style="color: red;">&#8861;</label>
     </div>
    </body>
    </html>

Additional Information

as you see here it doesnt show the tables information