JSFiddle - React, Tailwind, and code Playground

HTML

<input id="show" type="button" value="Show">

JavaScript

function globalError(tx, error)
{
    alert("Error: " + error.message);
}

var db = window.openDatabase('TabOrder', '', 'Bar Tab Orders', 2500000);
db.transaction(function(tx) {
    tx.executeSql('DROP TABLE IF EXISTS Drinks;', null, null, globalError);
    tx.executeSql('CREATE TABLE Drinks(id INTEGER PRIMARY KEY, category TEXT, drinkname TEXT, our_cost FLOAT(6,2), cust_cost FLOAT(7,2))', 
                  null, 
                  function()
                  {
                      insertDrinks("soft", "cola", 1, 1.1);
                      insertDrinks("cold", "smoothie", 5, 5.15);
                  },
                  globalError);
});

 function insertDrinks(category, drinkname, our_cost, cust_cost){
  db.transaction(function(tx){
      tx.executeSql('INSERT INTO Drinks (category, drinkname, our_cost, cust_cost) VALUES (?, ?, ?, ?)', [category, drinkname, our_cost, cust_cost], 
                    null,
                    globalError
                   );
  });
 }


function readDrinks(id, category, drinkname, our_cost, cust_cost){
     db.transaction(function(tx) {
         tx.executeSql('SELECT * FROM Drinks',
                 [],
                 function(tx, results)
                 {
                   for (var i=0; i<results.rows.length; i++) 
                   { 
                       var row=results.rows.item(i);
                       alert("Id: " + row['id']);
                       var stringout = "Category: " + row['category'] + "\n"; 
                       alert(stringout); 
                   } 
                 },                
                 globalError
                );
     });
};

$(function()
        {
            $('#show').click(readDrinks);
        });