[voraa]

а вот на последующих карточках, когда навожу на Edit, подсказка все-равно продолжает появляться на первой кнопке Edit. Как сделать чтоб именно возле каждой кнопки она появлялась?

Без кода всего понять трудно. Да и средствами разработчика надо пользоваться в таких случаях.
Что бросается в глаза.
У вас задано

/* добавляем эффект движения */
  button.note-edit:hover:before {
    bottom: 548px;
    right: 120px;
   }

Но от чего вы отсчитываете координаты? От родительского элемента? Нет!
Координаты отсчитываются от родительского элемента с position не static. (или от body если нет такого) А у вас родительские элементы не имеет position - значит static. Попробуйте задать им position: relative.

Еще недостаток. У вас в создаваемом блоке есть элементы с заданными id. Если карточек будет несколько, то и элементов с одним и тем же id будет несколько. Это неправильно! id должен быть уникальным на странице. В данном случае это может ни на что и не влияет, но в будущем может создать неприятности.
Можно идентифицировать такие элементы не с помощью id, а каким- нибудь атрибутом data- (например data-id). ну и обращаться к ним соответственно

<p data-id="note-title">${title}</p>

и

const titleEl = noteEl.querySelector('[data-id="note-title"]');

Подписи к элементам ввода обычно задаются элементом <label>.
Вот так надо

<label data-id="note-title">${title}<br>
  <textarea data-id="note-title-input" class="hidden">${title}</textarea>
</label>