搜索折叠引导程序（按钮折叠和表格）

Question

我想通过搜索栏中的输入来搜索分区（按钮折叠）或名称（表），到目前为止，我只创建了搜索分区（按钮折叠）的方法，当我在表中如何搜索名称（表）在搜索栏中也输入？

我尝试使用此代码，但仅适用于搜索按钮折叠。

我想要的就像下面的链接，但是当我尝试该代码时不起作用：

https://codepen.io/jpI/pen/VxzNEL?editors=0010

var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }

  $(document).ready(function(){
    $("#myInputContact").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      var div = $("#myDIV button");
      div.hide().filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      }).show();
    });
  });

#myInputContact {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.collapsible {
  background-color: #067ecc;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #54aade;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="panel panel-default">

  <div class="panel-body table-responsive">

      <input type="text" id="myInputContact" placeholder="Search for Contact.." title="Type in a name">

    <div id="myDIV">        
          <button class="collapsible" id="btnCol"> IT Division </button>
          <div class="content" id="myDivTable">
            <br>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="text-align:center;">Name</th>
                        <th style="text-align:center;">Telephone</th>
                        <th style="text-align:center;">Ext.</th>
                        <th style="text-align:center;">Location</th>
                        <th style="text-align:center;">Level</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td style="text-align:center;">Darmawan</td>
                        <td style="text-align:center;">089-028777-012</td>
                        <td style="text-align:center;">217</td>
                        <td style="text-align:center;">Jakarta</td>
                        <td style="text-align:center;">Top</td>
                    </tr>
                </tbody>
            </table>
          </div>

          <div id="br"><br></div>
          
          <button class="collapsible" id="btnCol"> Finance Controller Division </button>
          <div class="content" id="myDivTable">
            <br>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="text-align:center;">Name</th>
                        <th style="text-align:center;">Telephone</th>
                        <th style="text-align:center;">Ext.</th>
                        <th style="text-align:center;">Location</th>
                        <th style="text-align:center;">Level</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td style="text-align:center;">Eunoia</td>
                        <td style="text-align:center;">089-020997-012</td>
                        <td style="text-align:center;">208</td>
                        <td style="text-align:center;">Jakarta</td>
                        <td style="text-align:center;">Top</td>
                    </tr>
                </tbody>
            </table>
          </div>
    </div>
      
  </div>
</div>