JSFiddle - React, Tailwind, and code Playground

HTML

<input id="searchbar" onkeyup="fsearch()" type="text">
<br />
<span class="choice">A</span>
<span class="choice">B</span>
<br />
<button onclick="word_insertion(this)" data-product-name="A">Insert A</button>

JavaScript

function word_insertion(element){
document.getElementById('searchbar').value = element.getAttribute('data-product-name');
fsearch();}    
function fsearch(){ 
let input = document.getElementById('searchbar').value 
input=input.toLowerCase(); 
let x = document.getElementsByClassName('choice');       
for (i = 0; i < x.length; i++) {  
if (!x[i].innerHTML.toLowerCase().includes(input)) { 
x[i].style.display="none"; 
} else { 
 x[i].style.display="list-item";                  
}}}