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">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

$(document).ready(function(){
    $("#search-form").click(function() {
 
    var searchQuery = "Text";

    $.each('.single-image', function(){
        $(this).children("img").attr("alt"):contains(searchQuery).hide("slow");
        });
    });
});