JSFiddle - React, Tailwind, and code Playground
HTML
<p id='one'>Hello</p>
<p>Two</p>
<div id='results'></div><br><br>
<form method="post" id="myForm">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname"><br><br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname"><br><br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="[email protected]" required><br><br>
<label for="age">Age</label>
<input type="text" name="age" id="age"><br><br>
<label for="location">Location</label>
<input type="text" name="location" id="location"><br><br>
<input id="fmSubmit" type="submit" name="submit" value="Submit">
</form>
JavaScript
var ids = 'IDs: ';
//$('[id]').each(function () {
// ids += this.id + ' ';
//});
$('#results').text(ids);
var results = [];
$('#myForm input').each(function(){
results.push({ id: this.id, value: this.value });
alert('id:'+this.id+' value:'+this.value);
});
result.
results.foreach(function(i){
ids += this[i].id + ' ';
$('#myForm').addEventListener("focus", myFocusFunction(this.id), true);
$('#myForm').addEventListener("blur", myBlurFunction(this.id), true);
})
function myFocusFunction(id) {
results.foreach(function(){
document.getElementById(id).style.backgroundColor = "lightyellow";
})}
function myBlurFunction(id) {
results.foreach(function(){
document.getElementById(id).style.backgroundColor = "";
})}