JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<form name="tripleplay" action="" method="post">
    <div id="nestedLists"></div>
    <input type="submit" value="Submit" name="next" />
</form>

CSS

select{width:120px;}

JavaScript

var categories = [{
    "id": 131,
    "label": "Wearing Apparel",
    "children": [{
        "id": 131,
        "label": "Men",
        "children": [{
            "id": 65,
            "label": "Shirts"
        }, {
            "id": 29,
            "label": "Ties"
        }, {
            "id": 71,
            "label": "Belts"
        }, {
            "id": 91,
            "label": "Hats"
        }]
    }, {
        "id": 143,
        "label": "Women",
        "children": [{
            "id": 133,
            "label": "Blouses"
        }, {
            "id": 146,
            "label": "Skirts"
        }, {
            "id": 120,
            "label": "Scarves"
        }, {
            "id": 69,
            "label": "Hats"
        }]
    }, {
        "id": 59,
        "label": "Children",
        "children": [{
            "id": 78,
            "label": "Shorts"
        }, {
            "id": 137,
            "label": "Socks"
        }, {
            "id": 96,
            "label": "Coats"
        }, {
            "id": 54,
            "label": "Nightwear"
        }]
    }]
}, {
    "id": 148,
    "label": "Books",
    "children": [{
        "id": 121,
        "label": "Biography",
        "children": [{
            "id": 56,
            "label": "Contemporay"
        }, {
            "id": 58,
            "label": "Historical"
        }, {
            "id": 116,
            "label": "Other"
        }]
    }, {
        "id": 33,
        "label": "Fiction",
        "children": [{
            "id": 4,
            "label": "Science Fiction"
        }, {
            "id": 9,
            "label": "Romance"
        }, {
            "id": 78,
            "label": "Thrillers"
        }, {
            "id": 103,
            "label": "Crime"
        }]
    }, {
        "id": 25,
        "label": "Nonfiction",
        "children": [{
            "id": 34,
            "label": "How-To"
        }, {
            "id": 123,
            "label": "Travel"
        }, {
           ...