JSFiddle - React, Tailwind, and code Playground

HTML

<table id="addressbook">
    <tr>
        <th>Contacts</th>
    </tr>
    <tr>
        <td><span id="output">&nbsp;</span></td>
    </tr>
    <tr>
        <td><input type="button" value="add contact" onClick="ContactManager.addContact()" /></td>
    </tr>
</table>

CSS

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

JavaScript

var ContactManager = {
	contacts: [],
	resetView: null,
	appendView: null,
	addContact: function(){
		var person = {
			firstName: prompt("firstname", ""),
			lastName: prompt("lastname", ""),
			address: prompt("address", ""),
			phoneNumber: prompt("phonenumber", "")
		};
		this.contacts.push( person );
		this.listContacts();
	},
	listContacts: function(){
		var len = this.contacts.length;
		this.resetView();
		for( x = 0; x < len; x++ ) {
			this.appendView( this.contacts[x] );
		}
	}
};

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

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