Editing in a group of elements in JavaScript

Let now we have not single paragraph, but many:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

Let's make it so that when you click on any paragraph, an input for editing appears in it.

In fact, such a task is not difficult for us, since almost all the code was obtained by us in the previous lesson.

To solve our problem, we simply run a loop through paragraphs and use the code from the previous lesson in the loop (this code doesn't even need to be changed):

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    let input = document.createElement('input');
    input.value = elem.textContent;
    
    elem.textContent = '';
    elem.appendChild(input);
    
    input.addEventListener('blur', function() {
      elem.textContent = this.value;
      elem.addEventListener('click', func);
    });
    
    elem.removeEventListener('click', func);
  });
}