JSFiddle - React, Tailwind, and code Playground

by Alimin

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Yahoo Grid System</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<h1>Sistem Grid Yahoo Tanpa Database</h1>
<div id='form_input' style="width:400px; height:auto; border:solid 1px red;">
<h3>Tambah Kontak</h3>
	<form>
		<table border=0>
			<tr>
				<td>
					Nama
				</td>
				<td>
					Alamat
				</td>
			</tr>
			<tr>
				<td>
					<input type="text" name="nama">
				</td>
				<td>
					<input type="text" name="no_telepon">
				</td>
			</tr>
		</table>		
	</form>
	<button onclick="save_biodata()">Save</button><button onclick="cancel()">Cancel</button>
</div>
<div id="form_edit" style="width:400px; height:auto; border:solid 1px red;">
<h3>Edit Kontak</h3>
	<form>
		<table border=0>
			<tr>
				<td>
					Nama
				</td>
				<td>
					Alamat
				</td>
			</tr>
			<tr>
				<td>
					<input type="text" name="nama">
				</td>
				<td>
					<input type="text" name="no_telepon">
				</td>
			</tr>
		</table>		
	</form>
	<button id="btnedit">Save</button><button onclick="canceledit()">Cancel</button>
</div>
<div id="tbl_grid">
	<table style="border: 1px solid black"  id="tgrid">
		<tr>
		<td style="border: 1px solid black">No</td>
		<td style="border: 1px solid black">Nama</td>
		<td style="border: 1px solid black ">No Telepon</td>
		<td style="border: 1px solid black "><form><input type="radio" id="rdo1" name='group1' value="all" onclick="checkall()"/>all<input type="radio" id="rdo2"  name='group1' value="all" onclick="uncheckall()"  />none</form></td>
		</tr>
	</table>
	<button id="btn_add">Add New</button>
	<button id="btn_add" onclick="deletedata()" >Delete</button>
</div>
</body>
<script>
    $("#form_input").hide();
    $("#form_edit").hide();
    $(document).ready(function() {
        $("#btn_add").click(function() {
           ...