JSFiddle - React, Tailwind, and code Playground
HTML
First name:
<input type="text" id="firstname">
<br>
<p>Your first name is: <b id='boldStuff2'></b>
</p>
<p>Other people's names:</p>
<ol id="demo"></ol>
<input type='button' onclick='changeText2()' value='Submit' />
<input type='button' onclick='alert(getNames())' value='Alert Names' />
JavaScript
var list = document.getElementById('demo');
var lastid = 0;
function changeText2() {
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
entry.setAttribute('id','item'+lastid);
entry.setAttribute('data-name',firstname); //added a data-name attribute for easier access to name
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode("remove"));
removeButton.setAttribute('onClick','removeName("'+'item'+lastid+'")');
entry.appendChild(removeButton);
lastid+=1;
list.appendChild(entry);
}
function removeName(itemid){
var item = document.getElementById(itemid);
list.removeChild(item);
}
function getNames(){
var names = [];
for(var i=0;i<list.children.length;i++){
names.push(list.children[i].getAttribute("data-name"));//get previously set attribute and add to array
}
return names;
}