JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bug</title>
</head>
<body>

<aside id="form1">
    <input type="text" name="username" placeholder="username"/>
    <input type="password" name="password" placeholder="password"/><!--notice the name attribute-->
    <button type="submit">Sign In</button>
</aside>

<aside id="form2">
    <input type="password" name="password" placeholder="Create Password"/><!--notice the name attribute-->
    <input type="password" name="verify" placeholder="Verify Password"/>
    <button type="submit">Sign In</button>
</aside>

</body>
</html>

JavaScript

var fields = $("#form2 > input[type=password]");
var password = fields.eq( fields.index("[name=password]") );
var verify   = fields.eq( fields.index("[name=verify]") );

// This will erroneously set VERIFY's bgcolor
password.css("background-color", "gold");

// Gives "1", when it should be 0..
console.log( fields.index("[name=password]") );

// .. as you can see
console.log(fields);