How to display user input data stored in array, using HTML table

stackoverflow

HTML

<form>
    <h1>Please enter data</h1>
    <input id="title" type="text" placeholder="Title" />
    <input id="name" type="text" placeholder="Name" />
    <input id="tickets" type="text" placeholder="Tickets" />
    <input type="button" value="Save/Show" onclick="insert()" />
  </form>
  <table id="display" style="width: 100%"></table>

JavaScript

var data  = [];

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
var messageBox  = document.getElementById("display");

function insert ( ) {
  var title = titleInput.value;
  var name = nameInput.value;
  var ticket = ticketInput.value;

	data.push({
  	title: title,
    name: name,
    ticket: ticket
  });

  clearAndShow();
}

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";

  var html = "";

  // Show our output
  html += "<tr>";
  html += "<th>Titles</th>";
 
  html += "</tr>";
  html += "<tr>";
  html += "<th>Name</th>";
  html += "</tr>";
  html += "<tr>";
  html += "<th>Tickets</th>";
  html += "</tr>";
  for(i = 0; i <= data.length - 1; i++)
  {
    html += "<tr>";
    html += "<th>" + data[i].title + "</th>";
    html += "</tr>";
    html += "<tr>";
    html += "<th>" + data[i].name + "</th>";
    html += "</tr>";
    html += "<tr>";
    html += "<th>" + data[i].ticket + "</th>";
    html += "</tr>";
  }
  messageBox.innerHTML = html;
}