JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

CSS

.mouseover {
   border: 1px solid #000;
}
input {
   display: block;
   margin: .5em;
}
#id1 {
  background-color: red;
}

JavaScript

[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
	ele.addEventListener( 'mouseenter', function( e ) {
		e.currentTarget.classList.add( 'mouseover' );
		e.currentTarget.id = 'id' + i;
	}, false );
	ele.addEventListener( 'mouseleave', function( e ) {
		e.currentTarget.classList.remove( 'mouseover' );
	}, false );
});