JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">        
    <ul id="menu_list">
        <li data-categorie="the book">the book
            <ul>
                <li data-item="Introduction">Introduction</li>
                <li data-item="Content">Content
                    <ul class="roman">
                        <li data-target="c1.html"><span>I. </span><span>Het tijdperk der goden</span></li>

                    </ul>
                </li>
                <li data-item="Index">Index</li>
            </ul>
        </li>
        <li data-categorie="my stuff">my stuff
            <ul>
                <li data-item="Notes">Notes</li>
                <li data-item="Marks">Marks</li>
            </ul>
        </li>
        <li data-categorie="other">other
            <ul>
                <li data-item="Search">Search</li>
                <li data-item="Continue Reading">Continue Reading</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul {
    margin: 0;
    padding: 0;
}

#menu {
    width: 400px;
    text-transform: uppercase;
    color: white;
    background-color: #004249;
}

.roman {
    display: table;
    width: 100%;
    text-transform: normal;
    color: black;
    background-color: white;
}

.roman li {
    display: table-row;
}

.roman span {
    display: table-cell;
    padding: 1px 4px;
}

JavaScript

var content = {
    data: [{
        id: 0,
        ch: "",
        name: "Inleiding",
        target: "inleiding.html"
    }, {
        id: 1,
        ch: "I",
        name: "Het tijdperk der goden",
        target: "c1.html"
    }, {
        id: 2,
        ch: "II",
        name: "Helden en Krijgslieden",
        target: "c2.html"
    }, {
        id: 3,
        ch: "III",
        name: "De Bamboesnijder en het maanmeisje",
        target: "c3.html"
    }, {
        id: 4,
        ch: "IV",
        name: "Legenden omtrent Buddha",
        target: "c4.html"
    }, {
        id: 5,
        ch: "V",
        name: "Legenden omtrent vossen",
        target: "c5.html"
    }, {
        id: 6,
        ch: "VI",
        name: "Jizō, de god van Kinderen",
        target: "c6.html"
    }, {
        id: 7,
        ch: "VII",
        name: "De Legende in de Japansche Kunst",
        target: "c7.html"
    }]
}


$(document).ready(function () {
    var list = $('<ul class="roman">');
    
    for(var i = 0; i < content.data.length; i++) {
        var item =  content.data[i];
        var ch = item.ch;
        var name = item.name;
        var target = item.target;
        
        // i need to create this:
        // <li><span>I. </span><span>Het tijdperk der goden</span></li>
        
        var li = $("<li>")
        var span = $('<span>');
        span.html("test");
        var span2 = $("<span>");
        span2.html(ch);
        li.append(span);
        li.append(span2);
        list.append(li);
    }

    
    var Content = $('li[data-item="Content"]');
    Content.append(list);

 
});