JSFiddle - React, Tailwind, and code Playground
HTML
<br />
<h3>Fun With the Form</h3>
<p>Enter your information in the boxes. After you are satisfied with each entry, press the OK button to see the information displayed below. Use the TAB key to move from box to box and don't be surprised by where the TABs take you.</p>
<form id="myForm" onchange="txt_onchange(event.target)">
<div style="width: 33%; float: left;">
<fieldset>
<label>First name:</label>
<br />
<input type="text" name="firstname" id="firstname" size="30" value="" tabindex="1" />
<input type="button" value="ok" id="button1" />
<br />
<br />
</fieldset>
</div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream car:</label>
<br />
<input type="text" name="car" id="car" size="30" value="" tabindex="4" />
<input type="button" value="ok" id="button2" />
<br />
<br />
</fieldset>
</div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream Vacation:</label>
<br />
<input type="text" name="vacation" id="vacation" size="30" value="" tabindex="6" />
<input type="button" value="ok" id="button3" />
<br />
<br />
</fieldset>
</div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Nickname:</label>
<br />
<input type="text" name="nickname" id="nickname" size="30" value="" tabindex="3" />
<input type="button" value="ok" id="button4" />
<br />
<br />
</fieldset>
</div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Favorite meal:</label>
<br />
<input type="text" name="meal" id="meal" size="30" value="" tabindex="5" />
<input type="button" value="ok" id="button5" />
<br />
<br />
</fieldset>
</div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Last name:</label>
<br />
<input type="text" name="lastname" id="lastname" size="30" value="" tabindex="2" />
...
JavaScript
function txt_onfocus(txt) {
txt.style.backgroundColor = "pink";
}
function txt_onchange(txt) {
document.getElementById(txt.id + '-txt').innerHTML = txt.value;
}
var inputs = document.querySelectorAll('#myForm input[type="text"]');
inputs.forEach(function(input) {
input.onfocus = function () {
txt_onfocus(this);
};
});