Javascript that works outside an Alpine.js template doesn’t work inside it

I have a page that uses Alpine.js for dynamically creating and removing blocks of content with form elements in them.

Part of the block is two sets of radio buttons. At the moment, people can select options from both groups, but I want to change it so that if they select an option from one group, it unchecks the value from the other and vice versa.

At the moment, what I have is:

const shirtSizes = document.querySelectorAll('.shirt-sizes'); // scope only to the parent

shirtSizes.forEach((player) => {
  const kidsRadios   = player.querySelectorAll('.size-kids');
  const adultsRadios = player.querySelectorAll('.size-adults');

  kidsRadios.forEach((kid) => {
    kid.addEventListener('change', (event) => {
      adultsRadios.forEach((adult) => {
        adult.checked = false;
      });
    });
  });

  adultsRadios.forEach((adult) => {
    adult.addEventListener('change', (event) => {
      kidsRadios.forEach((kid) => {
        kid.checked = false;
      });
    });
  });

});

(That could probably be written better but that’s not the problem at the moment.)

I have a CodePen that shows that working fine.

But my actual project is constructed like this:

<div x-data="addPlayers()" x-init="addNewPlayer">
  <div class="mb-8">
    <template x-for="(field, index) in fields" :key="index">
      <input
        x-model="field.kids"
        type="radio"
        :name="`size_kids_${index + 1}`"
        :id="`size-kids-8_${index + 1}`"
        value="8"
      >
      …
    </template>
  </div>
  <button type="button" @click="addNewPlayer()">Add player</button>
</div>

<script>
  function addPlayers() {
    return {
      fields: [],
      addNewPlayer() {
        this.fields.push({
          kids: '',
          adults: ''
        });
        calcTotal(count);
        count++;
      },
      removePlayer(index) {
        this.fields.splice(index, 1);
        count = index;
        calcTotal(count);
      }
    }
  }
</script>

I’ve created another CodePen which might illustrate better how it’s all put together and you can see in this one that the same js for resetting the radios doesn’t work.

So why doesn’t it work in the Alpine version? And what do I need to do to get it to work?