JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" id="firstName" placeholder="First Name">
    <input type="text" id="lastName" placeholder="Last Name">
    <input type="tel" id="phone" placeholder="Phone">
</div>
<button id="add-btn">Add Traveler</button>
<button id="remove-btn">Remove Last Traveler</button>

<div id="output"></div>

CSS

#output{
    border:2px solid #CCC;
    padding:0.25em;
    margin:1em;
}


#add-btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
	-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
	box-shadow:inset 0px 1px 0px 0px #dcecfb;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
	background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea',GradientType=0);
	background-color:#bddbfa;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
#add-btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa));
	background:-moz-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-webkit-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-o-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-ms-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa',GradientType=0);
	background-color:#80b5ea;
}
#add-btn:active {
	position:relative;
	top:1px;
}

#remove-btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fc8d83),...

JavaScript

// A traveler class represents a traveler
function Traveler(firstName, lastName, phone) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phone = phone;
}

// An array to store all travelers
var travelers = new Array();

// Add Traveler
function addTraveler(traveler) {
    
    var fname = document.getElementById("firstName").value;
    var lname = document.getElementById("lastName").value;
    var phone = document.getElementById("phone").value;
    
    //alert('fname:'+fname+", lname:"+lname+", phone:"+phone);
    
    var traveler = new Traveler(fname, lname, phone);
    travelers.push(traveler);
    renderTravelers();
}

// Remove Traveler (returns the removed traveler)
function removeTraveler() {
    var traveler = travelers.pop();
    renderTravelers();
    return traveler;
}

// Display Travelers
function renderTravelers() {
    var htmlList = "";
    var arrayLength = travelers.length;
    
    for (var i = 0; i < arrayLength; i++) {
        htmlList += 
            "<li>" + 
            travelers[i].firstName + " " + 
            travelers[i].lastName  + " " + 
            travelers[i].phone     +
            "</li>"
    }
    htmlList = "<ul>" + htmlList + "</ul>";
    htmlList += "<em>Number of Travelers: " + arrayLength + "</em>";
    document.getElementById("output").innerHTML = htmlList;
}
    
// ::MAIN::
var addButton = document.getElementById("add-btn");
addButton.addEventListener("click", addTraveler);

var removeButton = document.getElementById("remove-btn");
removeButton.addEventListener("click", removeTraveler);





/*
// Add some travelers
addTraveler(new Traveler("Albert", "Einstein", "555-7331"));
addTraveler(new Traveler("Nikola", "Tesla", "555-1010"));
renderTravelers();
// --
var removed = removeTraveler();
renderTravelers();
// --
addTraveler(removed);
renderTravelers();
// --
addTraveler(new Traveler("Marie", "Curie", "555-4567"));
addTraveler(new Traveler("Isaac", "Newton", "555-9988"));
renderTravelers();
// --
var...