如果输入位于两个不同的div中，则Firefox / Chrome自动填充无法正常工作

Question

我有一个跨度超过一个div的表单，我正在尝试使chrome / firefox的自动填充功能起作用。一切正常，除了电子邮件输入仅在第一个电子邮件输入中填写，而不是第二个。

这里有一些HTML演示了这个问题：

<form action="" id="firecheckout-form">
  <div>
    <label for="billing:email">Email</label>
    <input type="email" name="billing:email" id="billing:email">
  </div>
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">

    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name">

    <label for="last_name">Last Name</label>
    <input type="text" name="last_name" id="last_name">

    <label for="billing:email_register">Email</label>
    <input type="email" name="billing:email_register" id="billing:email_register">
  </div>
</form>

jsfiddle：https://jsfiddle.net/goiceland/Lvmf4qy1/1/