JSFiddle - React, Tailwind, and code Playground

HTML

<div id="email">
<label>Email address</label>
<input type="text" />
</div>
<div id="current-pass">
<label>Current password</label><input type="password" />
</div>
<details>
  <summary>Change Password</summary>
<div id="password">
<label>New Password</label>
<input type="password" />
</div>
<div>
<label>Confirm password</label>
<input type="password" />
</div>
</details>

JavaScript

$('#current-pass').hide();
$('#email input').focus(function() {
if ($('details').attr('open')) {
$('details').removeAttr('open');
}
$('#current-pass').insertAfter($('#email'));
$('#current-pass').show();
});
$('details').bind('toggle', function(e) {
	if ($(this).attr('open')) {
    $('#current-pass').prependTo($('details'));
    $('#current-pass').show();
  }
console.log(e);
console.log(this);
console.log($(this).attr('open'))
});