JSFiddle - React, Tailwind, and code Playground
HTML
<div id="test"></div>
CSS
ul {
list-style: 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",
...