Редактиране в група елементи в 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 таблица. Направете така, че при кликне върху която и да е клетка в нея да се появи поле за редактиране на текста на тази клетка.