Populating Card With Data (Javascript & Firestore)

I am currently working on building a KDS which will display orders using javascript & firestore. The orders are being displayed with cards. However when i try to display the order items for each order in their respective card, all of the items are being placed in the first order card as you can see in the image attached.

Each order is a document in Firestore and in turn each order has a subcollection called 'Order Items' where the order items are stored as seen here.

I'm honestly lost as to what i am doing wrong. Can someone point me in the right direction? Thank you. Screenshot

const openOrdersQuery = query
                                (
                                    collection(db, "Orders"),
                                    where("orderStatus", "==", "New"),
                                    orderBy("timeStamp")
                                );
                        
        const querySnapshot = onSnapshot(openOrdersQuery, (querySnapshot) => 
        {
            container.innerHTML = "";
            ordersArray = [];
            querySnapshot.forEach((doc) => 
            {
                const orderObject = doc.data();
                ordersArray.push
                (
                    [
                        orderObject.orderNumber, 
                        orderObject.guestRmNum, 
                        orderObject.server, 
                        orderObject.orderStatus, 
                        orderObject.server, 
                        orderObject.table, 
                        orderObject.timeStamp,
                        orderObject.dateCreated.toDate().toLocaleTimeString()
                    ]
                );

                createOrderCard(orderObject);
            });

            async function createOrderCard(order) 
            {
                const card = document.createElement('div');
                card.classList = 'card-body';
                
                const orderContent = `
                                    <div class="card">
                                        <h1 id="orderNumberH1">Order: ${order.orderNumber}</h1>
                                        <h2 id="orderInfoH2">Room: ${order.guestRmNum}</h1>
                                        <h2 id="orderInfoH2">Table: ${order.table}</h2>
                                        <h2 id="orderInfoH2">Server: ${order.server}</h2>
                                        <h2 id="orderInfoH2">Time: ${order.dateCreated.toDate().toLocaleTimeString()}</h2>
                                        <hr></hr>
                                        <ul id="orderItemsList"></ul>
                                        <hr></hr>
                                        <button id="completeBtn" onclick="markCompleted('${order.orderNumber}')">Mark As Completed</button>
                                    </div>
                                `
                ;
                container.innerHTML += orderContent;
                
                var orderItemsArray = new Array();
                const orderItemsDocSnap = await getDocs(collection(db, "Orders/" + order.orderNumber + "/Order Items"));
                orderItemsDocSnap.forEach((doc) => 
                {
                    const orderItemsObject = doc.data();
                    orderItemsArray.push
                    (
                        [
                            orderItemsObject.item, 
                            orderItemsObject.quantity, 
                            orderItemsObject.modifiers, 
                            orderItemsObject.guestRequests
                        ]
                    );

                    let orderItemsList = document.getElementById("orderItemsList");
                        
                    let li = document.createElement('li');
                    li.innerText = orderItemsObject.quantity + "x " + orderItemsObject.item;
                    orderItemsList.appendChild(li);
                });
            }
        });

The issue is that you create multiple cards with the same id of orderItemsList and then you search for it via getElementById. Since ids are meant to be unique, getElementById will find the first match (inside the first card) and will stop searching. Instead, you could make sure that all ids are unique, adjust the id name at getElementById and then it should work.