JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<head>
  <script class="jsbin" src=""></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

  <body>
    <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>
    <div id="display"></div>
  </body>

CSS

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

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, name, ticket;
  title =titleInput.value;
  name =nameInput.value;
  ticket =ticketInput.value;
	data.push({
  	title:title,
    name:name,
    ticket:ticket
  });
  clearAndShow();
}

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

function computeHTML(){
	var html = "<table>";
  console.log(data)
  data.forEach(function(item){
 		html += "<tr>";
    html += "<td>" + item.title + "</td>"
    html += "<td>" + item.name + "</td>"
    html += "<td>" + item.ticket + "</td>"
    html += "</tr>";
  });
  html += "</table>"
  return html;
}