JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="lista">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<input id="campo"><button id="botao">Adiciona</button>

JavaScript

var lis = document.querySelectorAll('li');
    for(var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function(event) {
            alert(event.target.textContent);
    
        });
    } 

    var botao = document.querySelector('#botao');
    var input = document.querySelector('#campo');
    var lista = document.querySelector('.lista');

    botao.addEventListener('click',function() {

        var li = document.createElement('li');
        li.textContent = input.value;
        li.addEventListener('click', function(event) {
            alert(event.target.textContent);
        });
        lista.appendChild(li);
        
    });