JSFiddle - React, Tailwind, and code Playground

HTML

<input id="search-text">
<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 Txt" 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 = $("#search-text").val();

        //you have to show the images for each new iteration, or they'll remain hidden
        $('.single-image').show();
        $('.single-image').each(function(){
            //get alt attribute
            var thisAlt = $(this).find("img").attr("alt");
            //if thisAlt does not contains searchQuery (use > instead for does)
            if(thisAlt.indexOf(searchQuery) === -1){
                $(this).hide();                
            }
        });
    });
});