JSFiddle - React, Tailwind, and code Playground

CSS

li.selected ul {
    display: none
} 

ul span:hover {
    cursor: pointer
}

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 li(text) {
    var node = document.createElement('li');
    if (text) node.appendChild(document.createTextNode(text));
    return node;
}

function getTextItems(parent, tag) {
    var list = parent.getElementsByTagName(tag),
        arr = [], i;
    for (i = 0; i < list.length; ++i) {
        arr[i] = list[i].textContent;
    }
    return arr;
}

function bookToUl(node) {
    var ul = document.createElement('ul'),
        title = getTextItems(node, 'title')[0],
        year = getTextItems(node, 'year')[0],
        authors = getTextItems(node, 'author'),
        price = getTextItems(node, 'price')[0];
    ul.appendChild(li(title));
    ul.appendChild(li(year));
    ul.appendChild(li(authors.join(', ')));
    ul.appendChild(li('$' + price));
    console.log(ul);
    return ul;
}

function bookstoreToUl(store) {
    var books = store.getElementsByTagName('book'), i,
        ul = document.createElement('ul'), li;
    for (i = 0; i < books.length; ++i) {
        li = document.createElement('li');
       ...