JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<h2>My Phonebook</h2>
<h3>Can't Show Billy or Bob</h3>
<input type="text" id="myInput" onkeyup="search()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li class="alwaysshow"><a href="#" onclick="show()">Click it Show hide peoples</a>
    <ul id="show_content">
      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>
    </ul>
  </li>      
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function search() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1 || li[i].className.indexOf("alwaysshow") > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
    
function show() {    
   var a = document.getElementById("show_content");
    if(a.style.display== "none"){
      a.style.display = "";  
    }else{
       a.style.display = "none";
    }
}
</script>