JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="test" size="21" maxlength="120">
<button onclick="Zoek()" class="btn btn-info btn-block">tijdelijke zoek knop</button>
<div id="accordion"></div>

JavaScript

function Zoek() {
    var qeustion = document.getElementById("test").value;
    document.getElementById("accordion").innerHTML == "";
    var text = '{ "FAQ" : [' +
        '{ "vraag":"John" , "antwoord":"Doe" },' +
        '{ "vraag":"Anna" , "antwoord":"Smith" },' +
        '{ "vraag":"Peter" , "antwoord":"Jones" } ]}';

    obj = JSON.parse(text);


    for (i = 0; i < obj.FAQ.length; i++) {
        if (obj.FAQ[i].vraag == qeustion) //(obj.FAQ[i].getString("vraag").contains(question))
        {
            document.getElementById("accordion").innerHTML += "<div class='panel panel-default'><div class='panel-heading' role='tab' id='heading" + i + "'><h4 class='panel-title'><a data-toggle='collapse' data-parent='#accordion' href='#" + i + "' aria-expanded='false' aria-controls='" + i + "''>" + obj.FAQ[i].vraag + " </a></h4></div><div id='" + i + "' class='panel-collapse collapse in' role='tabpanel' aria-labelledby='heading" + i + "'><div class='panel-body'> " + obj.FAQ[i].antwoord + "</div></div></div> WOWOWOWOWOWOWOWOWWOWOWOOW";
        } else {
            document.getElementById("accordion").innerHTML = "No results found"
        }
    }
}