JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>basic directions service</title>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>

<table id="interface">
	<tr>
		<th>vehicle</th>
		<th>from:</th>
		<th>to:</th>
		<th>distance:</th>
	</tr>
	<tr>
		<td>
			<select id="vehicle">
				<option value="Agila">Opel Agila</option>
				<option value="Peugeot">Peugeot 108</option>
				<option value="Atos">Hyundai Atos</option>
				<option value="Matiz">Chevrolet Matiz</option>
				<option value="Overig">overig</option>
			</select>
		</td>

		<td><input id="from" type="text"></td>
		<td><input id="to" type="text"></td>
	</tr>
	<tr>
		<td colspan = "4"><button onclick="calculateMapsDistance()">create trip object</button></td>
	</tr>
</table>
<div id="content"></div>


<script>
var lastTripNr = 0;

var distance;

function calculateMapsDistance(){
  var orig = document.getElementById("from").value;
  var dest = document.getElementById("to").value;
  var calculatedDistance;
  var directionsService = new google.maps.DirectionsService();
  var request =
  {
    origin: orig,
    destination: dest,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request,function(response,status)
  {
    if (status==google.maps.DirectionsStatus.OK)
    {
      calculatedDistance = response.routes[0].legs[0].distance.value /1000;
      createTripObject(orig,dest, calculatedDistance)
    }
    else
    {
      alert("no route found!");
    }
  });
}

function createTripObject(orig, dest, calculatedDistance){
  lastTripNr++;
  var date = new Date();
  var dateString = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  var selectionElement = document.getElementById("vehicle");
  var selectedVehicle = selectionElement.options[selectionElement.selectedIndex].value;
  var origin = orig;
  var destination = dest;


  var distance = calculatedDistance;

  var tripObject =
  {
    nr: lastTripNr,
    date: dateString,
    vehicle:...