JSFiddle - React, Tailwind, and code Playground
HTML
<input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
<table>
<tr><td>
<details class="mainDetails">
<summary><b>First Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of First</li>
<li>group B of First</li>
</ul>
</details>
<details>
<summary><b>First People</b></summary>
<ul>
<li>John</li>
<li>Mark</li>
</ul>
</details>
</ul>
</details>
</td></tr>
<tr><td>
<details class="mainDetails">
<summary><b>Second Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of Second</li>
<li>group B of Second</li>
<li>group C of Second</li>
</ul>
</details>
<details>
<summary><b>Second People</b></summary>
<ul>
<li>Alex</li>
</ul>
</details>
</ul>
</details>
</td></tr>
</table>
JavaScript
function myFunction(){
var inputValue = document.querySelector('#pathText').value;
var trElements=document.querySelectorAll("tr");
for(i=0;i<trElements.length;i++){
var summaryText = trElements[i].querySelector("b").innerText
if (inputValue === summaryText) {
trElements[i].style.display = "none";
}
}
}