Array splice on $store array removes the wrong element in DOM

[SeanBerce]

So I have an Alpine store with an array of items, I have a x-for template to display those items on the page, there is a button to remove a given item from the array. The issue is that no matter which element is removed from the array the last element in the x-for template is removed.

example:
You could click "Remove Item" on "item 1" and "item 1" aka index 0 would be removed from items, but "item 3" is removed from the page.

Alpine.store('foo', {
    items: [{ name: 'item 1' }, { name: 'item 2' }, { name: 'item 3' }],
})

<div x-data="$store.foo">
    <template x-for="(item, index) in items">
        <div>
            <div x-text="item.name"></div>
            <button @click="items.splice(index, 1)">Remove Item</button>
        </div>
    </template>
</div>

Thanks for any suggestions you may have!

[SimoTod]

You need a unique key on your template tag (https://alpinejs.dev/directives/for#keys).
Do not use index because it's important that the key identifies the same element on each iteration.
In your example, it would be <template x-for="(item, index) in items" :key="item.name">

[SeanBerce]

That did the trick! Thanks dude!