JSFiddle - React, Tailwind, and code Playground

HTML

<div id="treeview-right" >
        <ul class="k-group k-treeview-lines" role="tree">
            <li role="treeitem" class="k-item k-first">
                <div class="k-top">
                    <span class="k-icon k-i-collapse"></span>
                    <span class="k-in">
                        <span class="Header">常用開發工具</span>
                        <span class="Tag">i:nil=true</span>
                    </span>
                </div>
                <ul class="k-group" role="group" style="display: block;">
                    <li role="treeitem" class="k-item k-last" >
                        <div class="k-bot">
                            <span class="k-icon k-i-collapse"></span>
                            <span class="k-in">
                                <span class="Header">OLAP</span>
                                <span class="Tag">MenuItem_MDP_ManageDQuery</span>
                            </span>
                        </div>
                        <ul class="k-group" role="group" style="display: block;">
                            <li role="treeitem" class="k-item k-last">
                                <div class="k-bot">
                                    <span class="k-in k-state-selected">
                                        <span class="Header">Page</span>
                                        <span class="Tag">MenuItem_MaintainPage</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li role="treeitem" class="k-item k-last" >
                <div class="k-bot">
                    <span class="k-in">
                        <span class="Header">個人訊息明細</span>
                        <span class="Tag">MenuItem_CWSMessageList</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
    
    <div...

JavaScript

$('div#treeview-right').each(function () {
        
            var Items = this.getElementsByClassName("k-group")[0];
            var xmlstr = "";
            var Header = this.getElementsByClassName("Header")[0].innerHTML;
            var Tag = this.getElementsByClassName("Tag")[0].innerHTML;
            //console.log(Items);
            if (Items !== undefined) {
                xmlstr += "<XmlNodeItem>\n";
                xmlstr += "<Header>" + Header + "</Header>\n";
                xmlstr += "<Tag>" + Tag + "</Tag>\n";
                xmlstr += "</XmlNodeItem>\n";
                $('ul li').each(function () {
                    console.log(this);

                })
            }
            $('div#output').text(xmlstr);

        })