JSFiddle - React, Tailwind, and code Playground

CSS

li.selected ul {
    display: none
}

JavaScript

var txt = '<?xml version="1.0" encoding="UTF-8"?><bookstore>    <book category="cooking">        <title lang="en">Everyday Italian</title>        <author>Giada De Laurentiis</author>        <year>2005</year>        <price>30.00</price>    </book>    <book category="children">        <title lang="en">Harry Potter</title>        <author>J K. Rowling</author>        <year>2005</year>        <price>29.99</price>    </book>    <book category="web">        <title lang="en">XQuery Kick Start</title>        <author>James McGovern</author>        <author>Per Bothner</author>        <author>Kurt Cagle</author>        <author>James Linn</author>        <author>Vaidyanathan Nagarajan</author>        <year>2003</year>        <price>49.99</price>    </book>    <book category="web" cover="paperback">        <title lang="en">Learning XML</title>        <author>Erik T. Ray</author>        <year>2003</year>        <price>39.95</price>    </book></bookstore>';

function generate(node) {
    if (node.nodeType != 1) return "";
    var html = "<li>" + node.nodeName;
    var htmlForChildNodes = "";
    for (var i = 0; i < node.childNodes.length; i++) {
        htmlForChildNodes += generate(node.childNodes[i]);
    }
    if (htmlForChildNodes) {
        html += "<ul>" + htmlForChildNodes + "</ul>";
    }
    html += "</li>";
    return html;
}

if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(txt);
}

document.body.innerHTML = "<ul>"+generate(xmlDoc.documentElement)+"</ul>";

document.querySelector("ul").addEventListener("click", function(event) {
    event.target.classList.toggle("selected");
});