addEventListener for multiple elements one after the other?

Since you want to respond to an event of the respective button, you also need to attach the lister to it.

There are different ways of solving this. I’ll introduce three.

(a)

const button = document.createElement("button");
button.type = "button";
button.classList.add("sidebarNotice");
button.id = `button${field}`;
button.textContent = notice;
button.addEventListener("click", evt => { /* ... */ });

const listItem = document.createElement("li");
listItem.appendChild(button);
sidebar.appendChild(listItem);

(b)

// after innerHTML
sidebar.querySelector(`#button${field}`).addEventListener("click", evt => { /* ... */ });

(c)

sidebar.innerHTML += `
${notice}
`;

// doSomething:
function doSomething(sender) {
  // ...
}

The first option should be the fastest in performance. In the second way, the button would have to be searched only in the DOM, in the third way a handler becomes via onclick attached.

As regards I would suggest some improvements and simplifications to your code.

1) Collect notes and ID. All you need is an array.

const notes = [];

// add:
notes.push({ content: "Hello world!", id: "some-id" });

// find:
const note = notes.find(n => n.id === "searched id");

Alternatively, you could also save the notes in an object, the ID corresponding to the property name.

const notes = {};

// add
notes["some-id"] = "Hello world!";

// find
const note = notes["searched id"];

The button will of course also receive the ID as before to be able to create the corresponding association later when clicking.

However, I would ask why you use the note as a button label. On the one hand, your buttons (usually) are quite stretched and on the other hand you don’t need an array/object that stores the notes separately. When you click, you will get as good via

button.textContent

to the note content.

2) I would always try to reduce the search for elements in the DOM. You can save the reference to the text field globally (outside your functions).

const textarea = document.getElementById("textfield");

function add() {
  const note = textarea.value;
  /* ... */
}

Regarding your textbook– I would also like to say that you are currently always applying it as a global variable. This happens with all the variables you do without let/const/var most clear.

3) Two more unnecessary operations are your template string for emptying the text field and plus– Function. Simple, faster and shorter:

textarea.value = "";
++field;

4) Functions AddOnClick and AddOnClick2 does not need it, especially since the second function is not well named.

Within the Event Handler you can easily access the attributes of the clicked button.

Example:

button.addEventListener("click", evt => {
  // by event object
  const clickedButton = evt.currentTarget;
  console.log(clickedButton.id);

  // by global event object
  const clickedButton2 = event.currentTarget;
  console.log(clickedButton2.id);

  // by button variable from outside
  console.log(button.id);
});

When using onclick (see above) indicates the parameter sender on the button.

You set the variable notice globally. That means, whenever you apply a note, you change the value of the same variable that is displayed when you click.

It must be a local variable in : to be created.

function add() {
  textarea = document.getElementById("textfield");
  const notice = textarea.value; // local variable

  /* etc. ... */