JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" style="border: 1px solid black; width: 500px; height: 400px"></div>

JavaScript

var contents = [
    { 
        name : 'test',
        contents : [
            {
                name : 'test > test 1'
            },
            {
                name : 'test > test 2'
            },
            {
                name : 'test > test 3'
            }                
        ]
    },
    {
        name : 'test 2'
    }        
];

var dummy = {
    do : function() {
        var element = $('<ul>');
        dummy.recursive(element, contents);

        $("#content").append(element);
    },
    recursive : function( element, contents ) {
        for( i = 0; i < contents.length; i++ ) {
            var item = contents[i];

            var li = $('<li> (' + i + ') ' + item.name + '</li>');
            
            if( item.contents && item.contents.length ) {
                var ul = $('<ul>');
                dummy.recursive(ul, item.contents);
                
                li.append(ul);
            }
            element.append(li);
        }
    }
};

$(document).ready(function() { dummy.do(); });