Как добавить новый элемент по клику.

[mer1985uui]

Не подсажете как решить проблему, при нажатии на кнопку add it создается новый элемент списка, но когда уже нажимаю на этот созданный элемент, уже не создается новый элемент.
Спасибо

<ol id="list">
<li>0 <button data-operation="delete">delete it</button></li>
<li>1 <button data-operation="delete">delete it</button></li>
<li>2 <button data-operation="delete">delete it</button></li>
<li>3 <button data-operation="add">add it</button></li>
</ol>

<script>
	  function handler(e) {
	  	
	  	var self = e.target
	  	var deleteVar = self.getAttribute('data-operation');
	  	var parentList = self.parentElement.parentElement;
	  	var li = document.createElement('li');
	  	li.innerHTML = self.parentElement.innerHTML;
	  	if (e.target.tagName == "BUTTON") {
	  		if (deleteVar == 'delete')
	  		{
	  			parentList.removeChild(self.parentElement);
	  			console.log(arr);
	  		} else if (deleteVar == 'add') {
	  			parentList.appendChild(li);
	  			console.log(arr);
	  		}
	  	}
	  	
	  }

	  var arr = document.getElementsByTagName('button');

	  
	for (var i = 0; i < arr.length; i++) {
	  	arr[i].addEventListener("click", handler);
	 }
			
	</script>

[рони]

mer1985uui,
или строка 16

li.addEventListener("click", handler);

или строки 21- 28

document.querySelector('#list').addEventListener("click", handler);