JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<h1>

</h1>
<table>
  <thead>
    <tr>
      <th><input id="bd" /></th>
      <th><input id="bu" /></th>
      <th><input id="offer" /></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="bd">CBD</td>
      <td>
        <table>
          <tr>
            <td class="bu">MLV</td>
            <td>
              <table>
                <tr>
                  <td>OT Offer</td>
                </tr>
                <tr>
                  <td>OXE Offer</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="bu">SMB</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="bd">CCBD</td>
    </tr>
    <tr>
      <td class="bd">NBD</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-spacing: 0px;
  border-collapse: separate;
  margin: 0px;
}

td {
  vertical-align: top;
  /* border: 1px solid black; */
  padding-top: 0px;
}

.hidden {
  display: none;
}

JavaScript

$(function() {
	toggleRows();
  
  $("input").on('input', function(){
  	var inputValue = $(this).val();
  	var targetClass = $(this).attr("id");
    $("." + targetClass).each(function(){
      var targetValue = this.innerHTML;
			
      console.log("");
      
      if (!inputValue){
        $(this).parent().removeClass("hidden");
      }
      
      if (targetValue.toLowerCase().indexOf(inputValue.toLowerCase()) < 0){
        $(this).parent().addClass("hidden");
      } else {
        $(this).parent().removeClass("hidden");
      }
    });
  }); 
 
});

var sampleObj = {
  bd: "CBD",
  bu: {
    name: "MLV",
    line: {
      name: "Super Line",
      offers: {
        name: "OT Offer",
        products: [
          ["Name", "BD", "BU"]
        ]
      }
    }
  }
};

document.getElementsByTagName("h1")[0].innerHTML = sampleObj.bd;

function toggleRows() {
  $("td").on("click", function() {
    var tableToHide = $(this).next();
    if (tableToHide.hasClass("hidden")) {
      tableToHide.removeClass("hidden");
    } else {
      tableToHide.addClass("hidden");
    }
  });
}