Save form serialize data to the Sqlite database javascript

am trying to save the serialized data of a html input and select which is created dynamically i have no idea how to save this using javascript to a sqlite table,Example i have 4 cells in a row 1 cells has a textbox ,the second has a dropdown,third has a textbox and forth too
but on dropdown change the first and the second (third cell) textbox value are automatically filled and after i enter the forth a new row is created and goes so on

My problem is that i want save the data in a sqlite using javascript or jquery as soon as a the save button is clicked the form's input and the selected value should be saved in the sqlite database

Say in my example :

i have four rows entered the data then on click of save the save should ignore the fifth as it has no value

User view Row(s)

1. first cell second cell(dd) third cell fourth cell
2. first cell second cell(dd) third cell fourth cell
3. first cell second cell(dd) third cell fourth cell
4. first cell second cell(dd) third cell fourth cell
5. this row should be ignored

save the same data in the sqlite database as rows one below another

Demo JSfiddle

JS:

$('#results').append('<form id=savealldata><table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></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></TR></TABLE></form>'
);

    $('#results').on('focus', ':input', function() {
        $(this).closest('tr').filter(function() { 
            return !$(this).data('saved'); 
        })
        .find(':input').each(function() {
            $(this).data('value', this.value);
            $(this).closest('tr').data('saved', true);
        });
    })
    .on('input change', ':input', function() {
        $(this).data('filled', this.value != $(this).data('value'))
        var tr  = $(this).closest('tr');
            all = tr.find(':input'),
            fld = all.filter(function() {
                return $(this).data('filled');
            });
        if( all.length == fld.length ) {
            if( !tr.data('done') ) {
                $('#buttonclck')[0].click();
                tr.data('done', true);
            }
        } else {
            if( tr.data('done') ) {
                tr.next('tr').remove();
                tr.data('done', false);
            }
        }
    });

    $('#buttonclck').on('click', function () {
        var lastRow = $('#productanddates').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.find("input[type='text']").val('');
        cloned.insertAfter(lastRow);
    });


$('#productanddates tr').on('change','.dd', function(e) {
    var data ="dummy data";
    $(this).closest('td').prev().find('input').val(data).trigger('input');
    $(this).closest('td').next().find('input').val(data).trigger('input');
});

HTML:

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

<input id="buttonclck" type="button" class="hide" value="button"/>

<button id="save">save</button>