Sign up to access "Build a Notes App with Alpine.js" right now.

So really, in this list, when we click on an item, if we just take the note within that item and set it to the current note ID, this should really just flip everything around for us and set the note in view here so we can start editing it. So let's try this out.

Now if we come up to our list item in here, you'll notice that inside of here we have this anchor with an absolute position in set zero. What's actually happening with this anchor within Tailwind is it's taking over the entire section of this.

So we can pretty much click anywhere inside of here to select this new note. You can see that we've got that focus outline none on there as well. So with this, what we can do is add an event handler to this anchor. So we're going to say click prevent because we don't want the default behavior,

which is actually to go through to a hash, which has happened already. And we want to do something inside of here. Now we could call a method to switch the current note ID. Or what we could do is access the store directly, access the note store,

and then go ahead and set the current note ID in here to the note ID that we're currently iterating through. And that is pretty much it. Let's go ahead and try it out.

So we start with existing note because, as we've seen before, the ordered list means the latest note is at the top. And we have last edited of two here. Now if I click on another existing note, sure enough, that's been switched over.

Now, even though we don't have a kind of signify that this is the currently selected note, if I go ahead and edit this at all, notice that that bumps to the top because we have touched the timestamp on this note that we have selected. And the ordering here means that when the timestamp is greater, it gets pushed to the

top. So this existing note here will just say updated. And sure enough, that gets pushed to the top as well. So everything now is nicely but slowly coming together.

Like I said, if you wanted to, you could implement a method. So let's just go back to that anchor. You could call a method on the store to change the current note. I think for now, since this is pretty simple, we're just going to set the current note

directly within this click handler here. But that's pretty much it. Now we can just choose any of these notes, edit them, and we know that we're always going to have the latest edited note at the top of our list.