JSFiddle - React, Tailwind, and code Playground

HTML

<table id="adsressbook">
    <tr>
        <th>Contacten</th>
    </tr>
    <tr>
        <td><span id="output">&nbsp;</span>

        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="add contact" onClick="addcontact()" />
            <input type="button" value="show" onClick="listContacts()" />
        </td>
    </tr>
</table>

CSS

#adsressbook {
    width:300px;
}
#adsressbook td, th {
    border:1px solid #000;
    padding:5px 10px;
}

JavaScript

var contacts = [];

function addcontact() {
    var person = {
        firstName: prompt("firstname", ""),
        lastName: prompt("lastname", ""),
        address: prompt("address", ""),
        phoneNumber: prompt("phonenumber", "")
    };
    contacts.push(person);
}

function resetView() {
    document.getElementById("output").innerHTML = "";
}

function printPerson(person) {
    document.getElementById("output").innerHTML +=
        person.firstName + " - " +
        person.lastName + " - " +
        person.address + " - " +
        person.phoneNumber + "<br />";
}

function listContacts() {
    resetView();
    var len = contacts.length;
    for (x = 0; x < len; x++) {
        printPerson(contacts[x]);
    }
}