Event binding on input in Component in {#each} loop uses data from first item in list

[LRNida]

Situation: looping over a list of contact components with an {#each} loop. The contact component has a contact prop that is exported. Inside the contact component there is a checkbox that toggles the isFavourite status with an <input><label></label> structure;

Desired behaviour: putting an on:change={() => updateContact(contact)} on the input should result in the handler being called with the actual contact data that is shown.

What actually happens: the handler is always called with the data of the first contact in the list. This only happens (afaik) when the binding is on the input element. If the binding is on the label, the handler is called with the correct data.

Demo
The light grey cards are bugged examples (event on input), the dark grey work properly (event on label). See console to verify data in handler.

**Edit: ** Part of the mistake was using the same id="" for all inputs in the contacts. See here.
However, it's still strange that a component would get data from its sibling regardlesss.

[LRNida]

My understanding of how things are supposed to work was wrong