Web SQL results invalid order as i intended - database

Question

I have 5 Questions in database table
1 textbox
2 dropdown
3 dropdown
4 textbox
5 textbox
but when I finish transactions it shows with invalid order like
1 textbox
4 textbox
5 textbox
then
2 dropdown
3 dropdown
it should be shown as above with correct order
in getDropdown function to get all options item
what's i'm doing wrong, Anyone can help? please,
//main function initially call to get all question
function showQuestions(){
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);
if(item['ANS_TYPE'] == "dropdown"){
getDropdown(item['QU_MESSAGE'],item['QU_ID']);
}
if(item['ANS_TYPE'] == "textbox"){
getTextbox(item['QU_MESSAGE']);
}
}//for loop
});//execute
});//transaction
}//end function
function getTextbox(question){
$('#elements').append('<div data-role="fieldcontain">'
+ '<label for="textinput1">'
+ question
+ '</label><br /><br />'
+ '<input name="" id="textinput1" placeholder="" value="" type="text">'
+ '<br /><br /><hr></div>').trigger('create');
}
function getDropdown(question,qu_id){
var options = ''; option = '';
options += '<div data-role="fieldcontain">'
+ '<label for="selectmenu1">'
+ question
+ '</label><br /><br />';
db.transaction(function(tx) {
tx.executeSql(selectChoiceStatement, [qu_id], function(tx, result) {
dataset = result.rows;
option = '';
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
var data = item['CH_MSG'];
option += '<option>'+data+'</option>';
}
options += '<select id="selectmenu1" name="">'+option+'</select>'
+ '<br /><br /><hr></div>';
$('#elements').append(options).trigger('create');
});
});
}

Answer 1

The callback function of executeSql is called asynchronously.
You should probably create the <select> immediately and add the <option>s later.