JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/dexie/dist/dexie.js"></script>
<h1>My Test DB</h1>

<button type="button" id="clearDB">Delete DB</button>
<div id="messages">
     <h3>Messages</h3>

    <ul></ul>
</div>
<div id="errors">
     <h3>Errors</h3>

    <ul></ul>
</div>

CSS

#messages ul {
    color:green;
}
#errors ul {
    color:red;
}

JavaScript

function log(message, isError) {
    var $msg = jQuery('<li></li>').text(message);
    if (isError) {
        jQuery('#errors').find('ul').append($msg);
    } else {
        jQuery('#messages').find('ul').append($msg);
    }
}

function createDB() {
    db = new Dexie(dbName);
    db.close();
    db.version(++dbVersion).stores(currTables);
    // Do I need this for loop?
    for (var v = dbVersion; --v;) {
        db.version(v).stores(window['tables' + v]);
    }

    db.open();
    log((dbVersion > 1) ? 'Upgraded to version ' + dbVersion : 'created new db', false);
    dBOpened();
}

function dBOpened() {
    var tables = db.tables,
        fieldObjs = [],
        fields, table, change;
    dbVersion = db.verno;
    for (var i = tables.length; i--;) {
        table = tables[i];
        fieldObjs = [table.schema.primKey].concat(table.schema.indexes);
        fields = [];
        for (var j = fieldObjs.length; j--;) {
            fields.push(fieldObjs[j].name);
        }
        newFields = currTables[table.name].replace('++', '').split(', ');
        change = false;
        for (var k = newFields.length; k--;) {
            if (fields.indexOf(newFields[k]) === -1) {
                change = true;
                break;
            }
        }
        if (change) createDB();
    }
    if (!change) log('Finished loading version ' + dbVersion, false);
}
var dbName = 'test',
    dbVersion = 0,
    db,
    tables1 = {
        'table1': 'id++, field1, field2, field3',
            'table2': 'id++, field1, field2'
    },
    tables2 = {
        'table1': 'id++, field1, field2, field3, field4',
            'table2': 'id++, field1, field2'
    },
    tables3 = {
        'table1': 'id++, field1, field2, field3, field4',
            'table2': 'id++, field1, field2, field3'
    },
    tables4 = {
        'table1': 'id++, field1, field2, field3, field4',
            'table2': 'id++, field1, field2, field3, field4'
    },
    currTables = tables1;
jQuery(function () {
   ...