Describe the solution you'd like

It would be great if the div for each memo/note contained a unique id and classes to make it easier to target them.

Right now this is how the div container for a note renders:

<div class="group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700">
  [note]
</div>

I'd like it if the note included a unique id and classes like "memo" and "tagged-warning" for easier targeting. It would be great if the div looked something like this:

<div id="memo-123456" class="memo tagged-personal tagged-warning tagged-web-dev …">
  <div class="memo-header"><div>
  <div class="memo-body"></div>
</div>

Then it would be easy to customize notes with CSS and Javascript like these:

.memo {
  background: lightgray;
}

.tagged-warning {
  border-left: 5px solid red;
}

let memo123456 = document.getElementById('memo-123456');

let memos = document.querySelectorAll('.memo');
let warnings = document.querySelectorAll('.tagged-warning');

Type of feature

Other

Additional context

No response