javascript create a single table instead of multiple for sqlite fetched result

Im trying to fetch the data in a html table inside that a table which contains a text box and the data but when iam trying to create a html table multiple tables are created inside a div when the data is fetched is there a way to crate a html table and the text box and fetch all the data ta in the same table

JS Fiddel
HTML:

<input type="hidden" id="id" />First name:
    <input type="text" id="firstName" />
<br />
Last name:
    <input type="text" id="lastName" />
<br />
Phone:
    <input type="text" id="phone" />
<br />
<button class="reset">Reset Form</button>
<button class="update">Update</button>
<button class="insert">Insert</button>
<button class="drop">Drop Table</button>
<div id="results"></div>

as we can see in the below image there are multiple table are created for each fetched result that should be one in my scenario.

JS:

var results = $('#results')[0];
var id = $('#id')[0];
var firstName = $('#firstName')[0];
var lastName = $('#lastName')[0];
var phone = $('#phone')[0];

var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
var selectAllStatement = "SELECT * FROM Contacts";
var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";
var updateStatement = "UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?";
var deleteStatement = "DELETE FROM Contacts WHERE id=?";
var dropStatement = "DROP TABLE Contacts";

var db = openDatabase("Book", "1.0", "Address Book", 200000);
var dataset;
createTable();

function onError(tx, error) {
    alert(error.message);
}

function showRecords() {
    results.innerHTML = '';
    db.transaction(function (tx) {
        tx.executeSql(selectAllStatement, [], function (tx, result) {
            dataset = result.rows;
            for (var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                results.innerHTML += '<table><tr><td><input type="text" value="' + item['lastName'] + '"></input> </td>, <td><input type="text" value="' + item['firstName'] + '"></input></td></tr><table>';
            }
        });
    });
}

function createTable() {
    db.transaction(function (tx) {
        tx.executeSql(createStatement, [], showRecords, onError);
    });
}

function insertRecord() {
    db.transaction(function (tx) {
        tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
    });
}

function loadRecord(i) {
    var item = dataset.item(i);
    firstName.value = item['firstName'];
    lastName.value = item['lastName'];
    phone.value = item['phone'];
    id.value = item['id'];
}

function updateRecord() {
    db.transaction(function (tx) {
        tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
    });
}

function deleteRecord(id) {
    db.transaction(function (tx) {
        tx.executeSql(deleteStatement, [id], showRecords, onError);
    });
    resetForm();
}

function dropTable() {
    db.transaction(function (tx) {
        tx.executeSql(dropStatement, [], showRecords, onError);
    });
    resetForm();
}

function loadAndReset() {
    resetForm();
    showRecords();
}

function resetForm() {
    firstName.value = '';
    lastName.value = '';
    phone.value = '';
    id.value = '';
}

$('.reset').on('click', resetForm);
$('.update').on('click', updateRecord);
$('.insert').on('click', insertRecord);
$('.drop').on('click', dropTable);