JSFiddle - React, Tailwind, and code Playground

HTML

<input id="searchTerm" />
<ul> 
    <li style="list-style-type: none; "><a href="a" alt="This offers details on cars, " class="report">Data Link 1</a></li>
    <li style="list-style-type: none; "><a href="a" alt="This offers details on monkeys" class="report">Data Link 2</a></li>
    <li style="list-style-type: none; "><a href="a" alt="This offers details on trees" class="report">Data Link 3</a></li>
</ul>

JavaScript

$(function() {
    $("#searchTerm").keyup(function() {
        $("a.report").stop().animate({opacity: 1});
        $("a.report:not(:[alt*=" + $(this).val()+"])").stop().animate({opacity: 0.1 });

    });
});