Clone and save in Sqlite the value of that table as a new row on Submit button click

I am trying to load the data in the dropdown that are inserted into Sqlite database say in my example after i insert the data in the text box "First Name" , "Last Name" , "Phone Number" later the phone number is to be loaded in the dropdown .Am using the insert for example but on real the text box are in a different location: My point is the data is loaded in the dropdown but they should be cloned as the first row textbox data is filled and the dropdown state is changed a new row should be created with the same dropdown and the text boxs to insert new row and a small help if the submit is clicked the same rows data to be saved in the new sqlite table .

JsFiddle Demo

On demo i have inserted a + button to create a new row but that is not working and i don't want that + button

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="insert">Insert</button>

<div id="results"></div>


<DIV>
    <input id="Sub" type="submit" value="submit"/>
</DIV>

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 db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
var dataset;
createTable();
function onError(tx, error) {
    alert(error.message);
}

function showRecords() {
    results.innerHTML = '<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr>  <td> <select name="Phonenumberdd1" id="Phonenumberdd1"> </select></td> <td>   <input type="text" name="renewal_by1" id="renewal_by1" />  </td>   <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td>  <td> <input type="button" name="button1" id="button1" value="+" />  </td></TR></TABLE>';


    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);

                Phonenumberdd1.innerHTML += '<option>'+item['phone']+'</option>';
            }
        });
    });
}

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 loadAndReset() {
    resetForm();
    showRecords();
}

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


$('.insert').on('click', insertRecord);




    $('#productanddates').on('click', ':button', function () {
        var lastRow = $(this).closest('#productanddates').find("tr:last-child");

        var cloned = lastRow.clone();
        cloned.find('input, select').each(function () {
            var id = $(this).attr('id');

            var regIdMatch = /^(.+)(\d+)$/;
            var aIdParts = id.match(regIdMatch);
            var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);

            $(this).attr('id', newId);
            $(this).attr('name', newId);
        });


        cloned.insertAfter(lastRow);
    });