Help - Display product variant information in cart & checkout

Read-Only Link

Hi all,

I am working with a client and we are trying to figure out how to display the selected product variant to the end-user in both the cart modal and checkout page, similar to this Figma mockup:

(I apologize for needing to use imgur links; for some reason it wouldn’t let me upload images directly to this form)
https://imgur.com/a/NCdJ9Db

This is the custom code we currently have that was set up by his previous developer, which iterates through every item in the cart and populates a list, and then should remove the “hide” class from the ul that holds the variant data:

$(".w-commerce-commercecheckoutorderitem").each((index, element) => {
            let productdiv = $(element);
            let sku = productdiv.find(".product_sku").text();
            let price = getNumber(productdiv.find(".checkout-order-price").text());
            let heading = productdiv.find(".w-commerce-commerceboldtextblock").text(); 
            let product_brand = productdiv.find(".product_brand").text();
            let product_type = productdiv.find(".product_type").text(); 
            totalOrder.push({ 
                item_name: heading,
                item_id: sku,
                price: price,
                item_category: product_type,
                item_brand: "Zeitlin’s Delicatessen",
                index:index+1,
                item_variant: "",
            });
            
            productdiv.find(".w-commerce-commercecheckoutorderitemoptionlist").removeClass("hide");
        });

This specific snippet of code is only on the checkout page and should run upon page load; The initial array population seems to work, however it is the last line that seems to have no effect. I have also tried iterating through all the items a second time, specifically to find this ul but that also did not work.

Lastly, whenever I tried to print out the ul from every item in the cart, it would only ever return what I assume is the first item, without the others. I used this code after the above code block to do this:

let allItemVariantLists = $(".w-commerce-commercecheckoutorderitemoptionlist");
        console.log(allItemVariantLists);

With this being the output:
https://imgur.com/a/vIA7piF

The expected output should have been 4 instances of the ul, and to top it off, whenever I clicked the node in the circled area (>0: ul.w-commerce…), the messages indicated by the red arrows popped up, which I assume means the node no longer exists.

Does anyone have any idea what could be causing this and how we can solve it?
Thanks!!