Firefox / Chrome Autofill не работает, если входные данные находятся в двух разных div

Question

У меня есть форма, которая занимает более одного деления, и я пытаюсь заставить автозаполнение 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/