JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="guestList">
    <li class="guestInput">test1</li>
    <li class="guestInput">test2</li>
    <li class="guestInput">test3</li>
</ol>
<button type="button" id="submit">OK</button>

JavaScript

var add = document.createElement("button");
add.type = "button";
add.innerHTML = "+";
add.addEventListener("click", function() {
    var http = new XMLHttpRequest();
        
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            document.querySelector("#guestList").innerHTML += '<li class="guestInput">test-add</li>'
            addRemoveButton(document.querySelectorAll(".guestInput").length-1);
        }
    }

    currentLength = document.querySelectorAll(".guestInput").length;
    http.open("GET","/", true);
    http.send();
});

var submit = document.querySelector("#submit");
submit.parentNode.insertBefore(add, submit);

var inputs = document.querySelectorAll(".guestInput");
for (var i = 0; i < inputs.length; i++) {
    addRemoveButton(i);
}

function addRemoveButton(i) {
    var removeButton = document.createElement("button");
    removeButton.type = "button";
    removeButton.className = "remove";
    removeButton.innerHTML = "x";
    removeButton.dataset["index"] = i;
    document.querySelectorAll(".guestInput")[i].appendChild(removeButton);

    var removeButtons = document.querySelectorAll(".remove");
    for (var j = 0; j < removeButtons.length; j++) {
        removeButtons[j].addEventListener("click", function() {
            document.querySelectorAll(".guestInput")[this.dataset["index"]].parentNode.removeChild(document.querySelectorAll(".guestInput")[this.dataset["index"]]);
        });
    }
}