JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tree"></ul>

CSS

ul {
    list-style: none;
}
#tree {
    margin: 2em 0 0 2em;
    width: 20em;
}
#tree > li {
    padding-bottom: 3px;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}
#tree li > a {
    color: #000;
    text-decoration: none;
}
#tree .sub > a:before {
    content:'+';
    padding-right: 4px;
    font-weight: bold;
}
#tree .sub >a.active:before {
    content:'-';
    padding-right: 4px;
    font-weight: bold;
}
#tree li ul {
    margin: 0.5em 0 0.5em 2em;
    display: none;
}

JavaScript

var aaData = [{
    "id": "1",
        "template_id": "1",
        "question": "Is government stable?",
        "answer": "Stable",
        "parent_question_id": "0",
        "section_id": "2",
        "subquestions": [{
        "id": "2",
            "template_id": "1",
            "question": "Is there funding approved?",
            "answer": "Since March 2913",
            "parent_question_id": "1",
            "section_id": "2",
            "subquestions": [{
            "id": "3",
                "template_id": "1",
                "question": "How much funding do we have?",
                "answer": "120 Million",
                "parent_question_id": "2",
                "section_id": "1"
        }, {
            "id": "4",
                "template_id": "1",
                "question": "Do we have all raw materials available?",
                "answer": "Not all, need to find correct type of wood.",
                "parent_question_id": "2",
                "section_id": "1"
        }, {
            "id": "5",
                "template_id": "1",
                "question": "What currency is the funding in?",
                "answer": "GBP",
                "parent_question_id": "2",
                "section_id": "1"
        }, {
            "id": "6",
                "template_id": "1",
                "question": "When will the currency be paid?",
                "answer": "7 days after invoice",
                "parent_question_id": "2",
                "section_id": "1"
        }, {
            "id": "13",
                "template_id": "1",
                "question": "why do we do this?",
                "answer": null,
                "parent_question_id": "2",
                "section_id": "1"
        }]
    }, {
        "id": "7",
            "template_id": "1",
            "question": "What groups are going to investigate?",
            "answer": null,
            "parent_question_id": "1",
            "section_id": "2",
           ...