JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html> 
<head>
  <title>Web SQL Database Example</title>
</head>
<body>
	<h1>Patients</h1>
	<ul id="patients">
	</ul>

	<h1>Actions</h1>
	<p>
		<input type="button" id="create" value="Create Table" />
	</p>
	<p>
		<input type="text" id="patient-name" />
		<input type="button" id="register" value="Register" />
	</p>
	<p>
		<input type="button" id="drop" value="Drop Database" />
	</p>

  <script>
	// SETUP
	var createBtn = document.getElementById("create"),
		registerBtn = document.getElementById("register"),
		dropBtn = document.getElementById("drop"),
		patientName = document.getElementById("patient-name"),  
		records = document.getElementById("patients"),
		id = 0;

	// UPDATE UI FOR NO RECORDS
	function handleNoRecords(){
		patients.innerHTML = "<li>No records</li>";
	}

	// GENERIC ON ERROR
	function onError(tx, error){
		alert("An error ocurred: " + error.message);
	}

	// LIST PATIENT FUNCTION
	function listPatients(){
		records.innerHTML = "";
		
		// LIST CURRENT RECORDS
		db.transaction(function(tx){
			var sql = "SELECT * FROM Patient";
			tx.executeSql(sql, [], function(tx, result){
				if(result.rows.length == 0){
					handleNoRecords();
					return;
				}
				for(var i = 0; i < result.rows.length; i++){
					patients.innerHTML += "<li>" + result.rows.item(i)['name'] + "</li>"; 
					id = result.rows.item(i)['id'];
				}
				
				id++;
			}, handleNoRecords)
		});
	}

	// PREPARE DATABASE
	var db = window.openDatabase("evolve", "1.0", "evolve store", 200000);

	// LISTEN FOR CREATE
	createBtn.addEventListener("click", function() {
		db.transaction(function(tx) {
			var sql = "CREATE TABLE Patient (id REAL UNIQUE, name TEXT)";        
			tx.executeSql(sql, [], function(tx) {
				alert("Patient table created");
			}, onError);
		});
	});

	// LISTEN FOR REGISTER
	registerBtn.addEventListener("click", function(){
		db.transaction(function(tx){
			var sql = "INSERT INTO Patient (id, name) VALUES (?, ?)";
			tx.executeSql(sql, [id++,...