I have the following simple code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body x-data="{
order:1,
items:[]
}">
<div>
<ul x-sort>
<template x-for="(item, index) in items" :key="index">
<li style="padding:1rem;" x-sort:item="index" x-bind:x-ignore="true" x-text="item"></li>
</template>
</ul>
<button @click="items.push(order);order+=1">Add Item</button>
</div>
</body>
</html>
How should I modify the code above so that a new item is always added to the bottom of the unordered list?