<ul id="ul">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
<li>пункт 4</li>
<li>пункт 5</li>
</ul>
<button id="but">Добавить ли</button>
let li = document.querySelectorAll('#ul li');
let but = document.getElementById('but');
let ul = document.getElementById('ul');
for(var i = 0; i < li.length; i++){
li[i].addEventListener('click', addSign);
}
function addSign(){
this.innerHTML = this.innerHTML + '!';
}
//Кнопочка ли
but.addEventListener('click', plus);
function plus(){
for(var j = 6; j<20;j++){
let addLi = document.createElement('li');
addLi.innerHTML = "Пункт" + [j];
addLi.addEventListener('click', addSign);
ul.appendChild(addLi);
}
}
Я хочу сделать так, чтобы при добавлении нового li у него порядковый номер поднимался на 1.
Подскажите как это сделать правильно.