JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://checkandsave.info/mark.js"></script>
<u>Rechercher un mot</u> : 
<input id="idinput1" name="nameinput1" type="text" onkeyup="background_rose1();nettoyage_backspace1()" class="positioninputrechercher" placeholder="Écrire" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Écrire'" />

<button id="button_reset1" onclick="reset_texte1(this);background_transparent1()" data-product-name="" class="cleanboutonreset"><span class="positioncroixreset1">&nbsp;X&nbsp;&nbsp;</span>

<span id="id_inactif1" class="classinactif"><img src="https://checkandsave.info/usa/images/inactif2.svg" class="positionimginactif" /></span>
<span id="id_actif1" class="classactif"><img src="https://checkandsave.info/usa/images/actif2.svg" class="positionimgactif" /></span>
</button>

<button id="button_ajout1" onclick="background_rose1()" class="positionclef1">a b c d</button>
<button id="button_ajout2" onclick="background_rose1()" class="positionclef2">a b c x</button>

<br /><br />

<u>Sujet 1</u> : 

<ul name="archive1">

<li> 
Texte a b c d sujet1
</li>

</ul>

<br /><br /><br /><br />

CSS

body{font-family:verdana;font-size:13px;} 

mark{background: #F3DCE7;} 

.classactif {visibility: hidden;}

.classinactif {visibility: visible;}

li {list-style-type: none;margin-left: -39px;}

.positionimginactif {
left:7px;
top:7px;
position:relative;
display:inline-block;
cursor: pointer;
}

.positionimgactif {
right:97px;
top:7px;
position:relative;
display:inline-block;
cursor: pointer;
}

.cleanboutonreset {
background-color:transparent;
cursor: pointer;
border:none;
padding: 0px;
margin:0px;
outline: none;
}

.positioncroixreset1 {
left:7px;
top:1px;
position:relative;
display:inline-block;
color:black;
font-family: verdana;
font-size: 14px;
}

.positionclef1 {
right:85px;
top:1px;
position:relative;
display:inline-block;
cursor: pointer;
}

.positionclef2 {
right:74px;
top:1px;
position:relative;
display:inline-block;
cursor: pointer;
}

JavaScript

// SCRIPT UNIQUE (POUR SUJET1) = RECHERCHE
<!-- (javascript) image svg filtre visible/cachée -->
function image_cachee_par_defaut1 (addr) {document.getElementById(addr).style.visibility = "hidden";	}
window.onload = function () {image_cachee_par_defaut1 ("id_actif1");};
function passeactif1() {
document.getElementById("id_inactif1").style.visibility = "hidden";
document.getElementById("id_actif1").style.visibility = "visible";}
function passeinactif1() {
document.getElementById("id_actif1").style.visibility = "hidden";
document.getElementById("id_inactif1").style.visibility = "visible";}

<!-- (javascript) reset/fond transparent par bouton et fond transparent par backspace -->
function reset_texte1(element){document.getElementById('idinput1').value = element.getAttribute('data-product-name');} 
function background_transparent1() {document.getElementById('idinput1').style.backgroundColor = 'transparent';passeinactif1()}
function nettoyage_backspace1() {var cleaninput1 = document.getElementById("idinput1");if (cleaninput1 && cleaninput1.value){}else{background_transparent1();passeinactif1()}}

<!-- (javascript) fond rose par bouton -->
function background_rose1() {document.getElementById('idinput1').style.backgroundColor = '#EAD1DC'; passeactif1()}

<!-- (jquery) filtrer/highlight textes ul-li et connection boutons clefs/bouton reset -->
var $input1 = $("#idinput1");
var $context1 = $("ul[name='archive1'] li");
function highL1(){
var term = $input1.val();
$context1.show().unmark();
if (term) {$context1.mark(term,
{"separateWordSearch": false, 
done: function(){$context1.not(":has(mark)").hide();
}});}}$(function(){$input1.on("input", function(){
highL1();});});
$('#button_ajout1').click(function(){
$('#idinput1').val('a b c d');highL1();});
$('#button_ajout2').click(function(){
$('#idinput1').val('a b c x');highL1();});
$('#button_reset1').click(function(){
$('#idinput1').val('');highL1();});