JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://checkandsave.info/mark.js"></script>
<input id="idinput1" name="nameinput1" type="text" onkeyup="background_rose();nettoyage_backspace()" />

<br /><br />

<span id="id_inactif"><img src="https://checkandsave.info/usa/images/inactif2.svg" class="position_inactif2" /></span>
<span id="id_actif"><img src="https://checkandsave.info/usa/images/actif2.svg" class="position_actif2" /></span>

<br /><br />

<button id="button_ajout" onclick="background_rose()">ajout text2</button>
<button id="button_reset" onclick="reset_texte(this);background_transparent()" data-product-name="" >reset</button>

<br /><br />

<u>titreA</u><br />
<table name="archive1">
<tr><td>text1</tr></td>
<tr><td>text2</tr></td>
</table>

<br /><u>titreB</u><br />
<table name="archive1">
<tr><td>autres</tr></td>
<tr><td>autres</tr></td>
</table>

CSS

body{font-family:verdana;font-size:13px;} 
mark{background: yellow;} 
.position_inactif2 {position:absolute;margin:0;left:5;} 
.position_actif2 {position:absolute;margin:0;left:5;}

JavaScript

function reset_texte(element){document.getElementById('idinput1').value = element.getAttribute('data-product-name');} 

function background_transparent() {document.getElementById('idinput1').style.backgroundColor = 'transparent';passeinactif()}

function nettoyage_backspace() {var myInput = document.getElementById("idinput1");if (myInput && myInput.value){}else{background_transparent();passeinactif()}}

function background_rose() {document.getElementById('idinput1').style.backgroundColor = '#EAD1DC'; passeactif()}

function image_cachee_par_defaut (addr) {document.getElementById(addr).style.visibility = "hidden";	}
window.onload = function () {image_cachee_par_defaut ("id_actif");};

function passeactif() {
document.getElementById("id_inactif").style.visibility = "hidden";
document.getElementById("id_actif").style.visibility = "visible";}

function passeinactif() {
document.getElementById("id_actif").style.visibility = "hidden";
document.getElementById("id_inactif").style.visibility = "visible";}

$('.classimgactif').hide();
var $input = $("#idinput1");
var $context = $("table[name='archive1'] tr");
function highL(){
var term = $input.val();
$context.show().unmark();
if (term) {$context.mark(term, {
done: function(){$context.not(":has(mark)").hide();
}});}}$(function(){$input.on("input", function(){
highL();});});
$('#button_ajout').click(function(){
$('#idinput1').val('text2');highL();});
$('#button_reset').click(function(){
$('#idinput1').val('');highL();});