JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="form">
<form id="myForm">
<input id="firstName" type="text"/><br/>
<input id="lastName" type="text"/><br/>
</form>
<input id="addValue" type="button" value="Add Value">
</div>
<div class="table">
<table id="Idris">
<th>First Name</th>
<th>Last Name</th>
</table>
</div>
<input id="hit" type="button" name="Add" value="Add"/>

JavaScript

$(document).ready(function(){
		$(".form").hide();
    $("#hit").click(function(){
		$('#myForm')[0].reset();
		$(".form").show();
		$(".form").dialog();
    });
	$("#addValue").click(function(){
		dataOne = $("#firstName").val();
		dateTwo = $("#lastName").val();
		$('#Idris').append('<tr><td>' + dataOne + '</td><td>'+ dateTwo +'</td></tr>');
		$(".form").dialog('close');
	});
});