JSFiddle - React, Tailwind, and code Playground

HTML

First name:
<input type="text" id="firstname">
<br>
<p>Other people's names:</p>
<ul id="demo"></ul>
<input type='button' onclick='changeText2()' value='Submit' />

JavaScript

var addedNames = [];
var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;

    // Array object has a method called indexOf, with only one argument
    // the item we are looking for. If this item is not in the array, the 
    // method returns -1. Otherwise, the method returns it's position.
    // For instance, let that we have defined the following array. 
    // var numbers = [1,2,3,4].
    // Then numbers.indexOf(5) returns -1.
    // While numbers.indexOf(4) returns 3.
    if (addedNames.indexOf(firstname)==-1){
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(firstname));
        list.appendChild(entry);
        // We add the inserted name in the array for later checks.
        addedNames.push(firstname);
    }
    else alert("is already in !");
}