JSFiddle - React, Tailwind, and code Playground

HTML

<form class="searchAndToggleBoxes" id="search-form" action="" method="post">
    <input id="search-input" type="search" name="s" placeholder="Search" >
    <input id="search-button" type="submit" value="Search" >
</form>
                
<button id="search-form" onclick="submitSearch">hi</button>
                
                
<div class="single-image" id="single-image">
    <a href="#">
        <img src="http://m.c.lnkd.licdn.com/mpr/mpr/p/4/005/05b/0ad/17ef3d8.jpg" alt="Special Text" width="90" height="60" />
     </a> 
</div>
            
<div class="single-image" id="single-image">
    <a href="#">
        <img src="http://m.c.lnkd.licdn.com/mpr/mpr/p/4/005/05b/0ad/17ef3d8.jpg" alt="Some Text to Search" width="80" height="60" />
    </a>
</div>
        
<div class="single-image" id="single-image">
    <a href="#">
        <img src="http://m.c.lnkd.licdn.com/mpr/mpr/p/4/005/05b/0ad/17ef3d8.jpg" alt="Great Text" width="80" height="60"/>
    </a>
</div>

JavaScript

// SEARCH FUNCTIONALITY
function submitSearch(){

  var searchQuery = new RegExp(document.getElementById('search-input').value);      // create regex with query
  var content = document.getElementsByClassName("single-image");    // create array of content to look for query in
  var hideResults = [];     // create an array to put the results to hide in
  var imagesToHide = document.getElementsByClassName("single-image-hide");  // get the element
  var displaySetting = imagesToHide.style.display;              // get the current display value
  

    for (i=0; i<content.length; i++) {
            if (! searchQuery.test(content[i].firstChild.firstChild.nodeValue)) {   // if the query not found for this result in query
                hideResults.push(content[i]);           // push to the hideResults array
                content[i].className = "single-image-hide";   // change class name so CSS can take care of hiding element
                document.getElementById("form-success").style.display = 'inline-block';
                alert(searchQuery);
                return false; // results will not stick without this?
            }
          }

    
    // set display to hidden
    if(displaySetting == 'inline-block'){
        imagesToHide.style.display = 'none';          // map is visible, so hide it
    }
    else{
        imagesToHide.style.display = 'inline-block';  // map is hidden so show it
    }
}
// END SEARCH FUNCTIONALITY