Павел

const ul = document.querySelector('#ul');
const button = document.querySelector('#but');

Никаких циклов не надо, достаточно посмотреть сколько уже есть элементов и сделать плюс один:

ul.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent += '!';
  }
});

button.addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = `пункт ${ul.children.length + 1}`;
  ul.appendChild(li);
});

или

ul.addEventListener('click', ({ target: t }) => t.matches('li') && t.append('!'));

button.addEventListener('click', () => {
  ul.insertAdjacentHTML('beforeend', `<li>пункт ${-~ul.children.length}</li>`);
});