Редактирование в группе элементов на JavaScript

Пусть теперь у нас есть не один абзац, а много:

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

Давайте сделаем так, чтобы по клику на любой абзац в нем появлялся инпут для редактирование.

На самом деле такая задача для нас не представляет сложности, так как почти весь код был получен нами в предыдущем уроке.

Для решения нашей задачи просто запустим цикл по абзацам и в цикле используем код предыдущего урока (этот код даже не понадобится изменять):

let 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);
	});
}

Дан тег ul. Сделайте так, чтобы по клику на любую li в ней появлялся инпут, с помощью которого можно будет поредактировать текст этой li.

Дана HTML таблица. Сделайте так, чтобы по клику на любую ячейку в ней появлялся инпут для редактирования текста этой ячейки.