addEventListener on a node list not working on first click

Hello everyone im new to javascript and currently confuse about this code.

var x=document.querySelectorAll('input');
for(let i=0;i<x.length;i++){
  x[i].addEventListener('change',function(){
    alert('hi');
  })
}

<input type="checkbox" name="cex" value="100"/>
<input type="checkbox" name="cex" value="102"/>
<input type="checkbox" name="cex" value="103"/>
<input type="checkbox" name="cex" value="103"/>
<input type="checkbox" name="cex" value="102"/>
<input type="checkbox" name="cex" value="100"/>

with this code there is 6 check box and when one of those check box is checked, alert 'Hi' will fire. but this code did not work on the first time i checked the checkbox because it did not show any alert. but the 2nd(and so on) time i checked the check box the alert will appear.

why is this happen? in this code snippet it seems works fine but when i code using codepen.io(free website to code html,css and javascript) this problem occur.

is it my code that have problem or the website?

FYI:I do not want to change the name of the checkbox for some particular reasons.