How to change html nesting structure with jquery

Hello, I could really use help implementing an open-source js plugin!

Background: I’m using a js plugin to make an org chart on my webflow. I want the information in the org chart to be pulled dynamically from webflow CMS. I can use collection lists and custom code to reference the appropriate CMS fields, but my problem is that the plugin wants all of the data to be inside a single <ul>. The way webflow is currently reading CMS data, a new <ul> is created for each collection item (you can see this by viewing page source).

I was able to successfully implement what i wanted to do on Codepen by appending all <li> tags to the first instance of the <ul> (see codepen link: https://codepen.io/jambronner/pen/ExPOMzx).

However, when I try to do the same in Webflow (and putting the jquery code in the page settings), I just end up with a blank page. Can anyone help me figure out what I’m doing wrong?


Here is my site Read-Only: https://preview.webflow.com/preview/jamaurs-business-starter?utm_medium=preview_link&utm_source=designer&utm_content=jamaurs-business-starter&preview=1e442e6babd8e45d876b239a08c84aee&pageId=5f106b964a910e0baad191fc&itemId=5f1526f729f766caf30fd806&mode=preview