JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://checkandsave.info/mark.js"></script>
<!-- input1 -->
<input id="idinput1" name="nameinput1" type="text" />

<!-- text that will be filtered/highlighted if write in input1 -->
<span id="thistext1">text1</span><br />

<!-- button1 -->
<button id="button1">add text2</button>

CSS

mark {background: yellow;}

JavaScript

$(function() {
var $input = $("input[name='nameinput1']"),
$context = $("#thistext1");
$input.on("input", function() {
var term = $(this).val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function() {
$context.not(":has(mark)").hide();
}});}});});

$('#button1').click(function()
{$('#idinput1').val('text2')});