I am encountering an issue with populating two tables using two searches based on user input in mySQL-JSON-AJAX. When the user enters a search term and clicks the corresponding button, data should populate the respective table. The problem arises when clicking button1 first fills data1 in the top table, and then clicking button2 appends data2 to the right of the top table instead of populating the bottom table as expected. However, if I start by clicking button2 to populate the bottom table and then click button1 for the top table, everything works correctly. How can I ensure that data2 goes to the bottom table even when data1 is already in the top table?
function processJSON1( data ) {
var next_row_num = 1;
$.each( data.matches, function(i, item) {
var this_row_id = 'result_row_' + next_row_num++;
//add data to table1
$('<tr/>', { "id" : this_row_id } ).appendTo('#table1');
$('<td/>', { "text" : item.col1 } ).appendTo('#' + this_row_id);
$('<td/>', { "text" : item.col2 } ).appendTo('#' + this_row_id);
$('<td/>', { "text" : item.col3 } ).appendTo('#' + this_row_id);
});
}