JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="add1()">Add1 data to indexedDb</button>
    <div id="start"></div>
    <div id="end"></div>
    <div id="timing"></div>

JavaScript

var db;
var request = indexedDB.open("newDatabase", 4);
 
request.onerror = function(event) {
  console.log("error: ");
};
 
request.onsuccess = function(event) {
  db = request.result;
  console.log("success: "+ db);
};
 
request.onupgradeneeded = function(event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("customers", {keyPath: "arseid"});
	var objectStore = db.createObjectStore("test", {keyPath: "id"});
}
        
        
 
function add1() {
    	var x = new Date();
	var h1 = x.getHours();
	var m1 = x.getMinutes();
	var s1 = x.getSeconds();
	console.log('starting insert on ' +  h1 + ':' + m1 + ':' + s1);
    document.getElementById("start").innerHTML='Start: ' + h1 + ':' + m1 + ':' + s1

	var tx = db.transaction(["customers"], "readwrite");
	for (var i = 0; i < 2000; i++) {
        var currId = Math.floor((Math.random() * 100000) + 1);
        var request = tx.objectStore("customers")
                .put({ arseid: currId, name: "Jonathan Smith", email: "[email protected]", favourite: "chocolate cake", pet: "rudolph the red nose reindeer", address: "999 letsbe avenue, townton, countyshire" });
	}


	tx.oncomplete = function (e) {
            var x2 = new Date(); 
            var h2 = x2.getHours(); 
            var m2 = x2.getMinutes(); 
            var s2 = x2.getSeconds(); 
               console.log('transaction complete ' + h2 + ':' + m2 + ':' + s2);
        document.getElementById("end").innerHTML='end: ' + h2 + ':' + m2 + ':' + s2;
        var seconds = (x2.getTime() - x.getTime()) / 1000;
        document.getElementById("timing").innerText='Time: ' + seconds + ' seconds';
        }
}