특정 순서로 선택하면 JavaScript Toggle Checkboxes가 깨집니다 (Mind Blowing!)

분명히 체크 박스는 원하는 순서대로 선택할 수 있지만이 중단에 문제가 있습니다. ADC 또는 DAC 순서로 선택하면 확인란 C가 나타나지 않습니다. 순서대로 또는 역순으로 선택하면 잘 작동하며 어떤 이유로 든 Firefox에서 항상 작동합니다. 이 이상을 볼 수 있습니다 . 이상한 바이올린을 보려면 여기를 클릭하십시오 .

왜 이런거야? 어떻게 해결할 수 있습니까?

HTML

<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>

<input type="checkbox" id="Bbox"  data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>

<input type="checkbox" id="Cbox"  data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>

<input type="checkbox" id="Dbox" data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>

 CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
 <div style="background-color:silver;">

 <div id="infoa">
 <input type="checkbox" id="kwd2"  >
 <label for="kwd2"> ALPHA</label><BR>
 </div>

 <div id="infob">
 <input type="checkbox" id="fff1">
 <label for="fff1"> BETA</label><BR>
 </div>

 <div id="infoc">
 <input type="checkbox" id="zzz3">
 <label for="zzz3"> CHARLIE</label><BR>
 </div>

  <div id="infod">
  <input type="checkbox" id="kwd5"  >
  <label for="kwd5"> DELTA</label><BR>
  </div>

  </div>

자바 스크립트

  document.addEventListener('change', function(e) {
  var id = e.target.getAttribute('data-info-id');
  var checked = e.target.checked;

  if (id) {
      var div = document.getElementById(id);
      if (div) div.style.display = checked ? 'inline' : 'none';
      alert("bang");
    }

  });

CSS

[id^="info"] {
display: none;
}