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

Не подсажете как решить проблему, при нажатии на кнопку 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);