Trying to get code to apply array to individual elements from while loop but all going to first one with id

Hello everyone, I've been trying to make a new system for my store and cannot seem to get the items from category to display. They come from MySQL which I have removed login for security but want to then convert to array and make a list item for each box. Orders are displayed in while loop but unless I echo directly from PHP orders are going to first box.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="assets/style.css" />
        <title>Cafe Admin</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="activeOrderBackground">
        <h3 id="activeOrderTitle">Active Orders</h3>
        </div>
        <?php
        $conn = new mysqli('localhost', '', '', '');
        $sql = "SELECT * FROM moderator";
        $result = $conn->query($sql);
        while ( $row=mysqli_fetch_assoc($result)) {
            ?>
            <script>
            var items = "<?php echo $row['category']; ?>".split(";");
            console.log(items);
                items.forEach(function(entry) {
                });
            </script>
            <div class="orderCard">
                <div class="orderCardTitle">
                    <p type="text" id="idTag" class="id orderCardTitleObject">ID: <?php echo $row['id']; ?></p>
                    <p type="text" id="customerTag" class="mod orderCardTitleObject"><?php echo $row['name']; ?></p>       
                </div>
                <div id="orderCardItems" class="orderCardItems">
                    <h3 class="orderCardItemsTitle">Items:</h3>
                    <hr />
                    <ul class="OrderCardItemsList">
                        <script>
                        var itemLength = items.length;
                            for (var i = 0; i < itemLength; i++) {
                                console.log(items[i]);
                            }
                        </script>
                        <?php echo $row['category']; ?>
                    </ul>
                </div>
                <button type="submit" class="update" rel="<?php echo $run; ?>">REMOVE</button>
            </div>
            
            <?php
        }?> 
        <script>
           
            
            $(document).ready(function(){
                
                $(".update").click(function(){
                    var container = $(this).closest('div'); // parent div
                    
                    var name = container.find('.mod').text();
                    var id = container.find('.id').text();
                    $.ajax({
                        url:'update.php',
                        method:'POST',
                        data:{
                            name:name,
                            id:id
                        },
                        success:function(response){
                            alert(response);
                        }
                     }); 
                }); 
            });
        </script>
    </body>
</html>