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

var txtbx = document.getElementsByTagName( 'input' )
  , i, l = txtbx.length
  ;
for( i = 0; i < l; i++ ){
	txtbx[ i ].addEventListener( 'mouseenter', ( function( int ) {
		return function( e ) {
			e.currentTarget.classList.add( 'mouseover' );
			e.currentTarget.id = 'id' + int;
		};
	} )( i ), false );
	txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
		e.currentTarget.classList.remove( 'mouseover' );
	}, false );
}