JSFiddle - React, Tailwind, and code Playground

HTML

<html><head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
.level1-group
{
padding-left: 1rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
color:white;
}
.level2-group
{
padding-left: 2rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
color:white;
}
.level3-group
{
padding-left: 3rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
color:white;
}
.level4-group
{
padding-left: 4rem;
background: #454555;
box-shadow: inset 0 -1px #575757;
color:white;
}
</style>


<script>
    window.onload = function() 
    {   
    	function getLevel(str) 
    	{
    	    return str.split('mylevel-')[1].slice(0, 1);
    	}
    	
    	function getAncestor(str) 
    	{
    	    return str.split('myancestor-')[1];
    	}
    	
    	function getValue(str)
    	{
    		return str.substring(0, str.indexOf('mylevel-')-1); 
    	}
    	
    	var obj=JSON.parse('{"Obj 1 mylevel-1 myancestor-1":{"Obj 1.1 mylevel-2 myancestor-1-1":{"Obj 1.1.1 mylevel-3 myancestor-1-1-1":{},"Obj 1.1.2 mylevel-3 myancestor-1-1-2":{}},"Obj 1.2 mylevel-2 myancestor-1-2":{"Obj 1.2.1 mylevel-3 myancestor-1-2-1":{},"Obj 1.2.2 mylevel-3 myancestor-1-2-2":{}}},"Obj 2 mylevel-1 myancestor-2":{"Obj 2.1 mylevel-2 myancestor-2-1":{}}}');
    	var str='';    	
    	
    	function trace(obj) 
    	{
   		  for (var key in obj) 
   		  {
  			var lvl=getLevel(key);
  			var anc=getAncestor(key);  
  			  
   			str +=
   			'<div class="card-header rounded-0 level'+lvl+'-group" id="heading-'+anc+'" data-toggle="collapse" href="#collapse-'+anc+'">'+
   			getValue(key)+
        	'</div>'+
        	'<div id="collapse-'+anc+'" class="collapse">';
       	
  		     var val = obj[key];    		      
 ...

JavaScript

$(document).ready(function(){
        $("#searchbox").keypress(function(){
        	$("div.collapse").collapse("hide");
            var search = $("#searchbox").val();
            $("div.collapse").find(":contains("+search+")").parent().collapse("show");
        });
    });