alpine.js - AlpineJS - 複数の Todo がある場合、自動選択が機能しない

Question

AlpineJSで小さな todo アプリを作成していますが、ユーザーがtodo をクリックしたときにフィールドを自動選択するという問題が発生しています。この問題は、複数の Todo がある場合にのみ発生します。

ユーザーが最初の todo をアプリに入力すると、todo をクリックして編集できます。フィールドは期待どおりに自動選択されます。ただし、ユーザーがアプリに複数の Todo を追加し、n+1の Todo を編集したい場合、フィールドは自動選択されなくなりますが、最初の Todo は問題なく自動選択されます。

これが私のCodePenです。

私の編集機能は次のようになります。

JS

[...]
edit(todo) {
    todo.editing = !todo.editing
    this.$nextTick(() => {
      document.getElementById(`edit-${todo.id}`).select()
    })
  }
[...]

HTML

[...]
<div
  x-text="todo.item"
  class="todo-item"
  @click="edit(todo)" // <-- point of interest
  x-show="!todo.editing"
  :class="{ 'completed' : todo.completed }"
  >
</div>

<input
  type="text"
  x-show="todo.editing"
  :value="todo.item"
  x-model="todo.item"
  @keydown.enter="edit(todo)"
  @keydown.escape="todo.editing = false"
  @click.away="todo.editing = false"
  class="edit-input"
  :id="`edit-${todo.id}`" // <-- point of interest
/>
[...]

私のロジックの何が問題なのか、誰かが考えているでしょうか? お手伝いありがとう！