I have to create a list based on the input of the user and then an option to remove an element if it's the case, I tried this.

My idea was to create the list and at the bottom have this "remove button" that once clicked on it it should have added a "remove" option for each element in the list but instead, I end up replacing all the elements of the list with this remove button, any tips?

```js

        function addmember(){

            var z = getInputValue();
            var ul= document.getElementById("crew1");
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(z));
            ul.appendChild(li);

        }
        function remove (){
            var r = document.getElementById("crew1");
            var z = r.getElementsByTagName("li");

            for(i = 0; i<z.length; i++){
                z[i].innerHTML ="<button type=\"button\" \">Remove a member</button>"
            }
        }

        function getInputValue(){
            // Selecting the input element and get its value 
            var inputVal = document.getElementById("myInput").value;

            // Displaying the value
            return inputVal;
        }

```

```html
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="addmember();">Add Member</button>

    <p>Crew:</p>
    <ul class = "prova" id="crew1">

    </ul>
    <button type="button" onclick="remove();">Remove</button>
</body>
</html>
```