## Frontend
<script>
$(document).ready(function () {
// Function to handle form submission
function submitForm(event) {
event.preventDefault();
$('#loadingSpinner').show();

const indicator = document.getElementById('indicator').value;
const selectedIP = document.getElementById('ip').value;

var dynamicPart = '?indicator=' + indicator;
if (selectedIP) dynamicPart += '&ip=' + selectedIP;                 

var ajaxURL = '/Request_Returned' + dynamicPart;
window.history.pushState({}, '', ajaxURL);

console.log('Form submitted with URL:', ajaxURL);
console.log('Data being sent:', {
indicator,
selectedIP
});

                        
$.ajax({
url: ajaxURL,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
    indicator: indicator,
    selectedIP: selectedIP
}),
success: function (response) {
    if ($.isEmptyObject(response)) {
        window.location.href = '/'; // Redirect to another URL
    return;
}
                                
    console.log('Response from server:', response); // Log the response to the console

    $('#fac_num').html('<span style="font-weight: bold; color: blue; font-size: 45px;">' + response.fac_num + '</span>');

    ['plot1', 'plot1_additional', 'plot2', 'plot3', 'plot4', 'plot5', 'plot6', 'plot7', 'plot8', 'plot9', 'plot10',     'plot11', 'plot12', 'plot13', 'plot14', 'plot15', 'plot16', 'plot17', 'plot17_additional', 'plot18', 'plot19']     
    .forEach(plotId => {
    $('#' + plotId).empty();
    });

    if (response.plot18 && response.plot18.trim() !== "") {
    $('#plot18').html(response.plot18);
    $("#row-plot18").show();                                
    } else {
    $("#row-plot18").hide();
    }

    if (response.plot19 && response.plot19.trim() !== "") {
    $('#plot19').html(response.plot19);
    $("#row-plot19").show();
    } else {
    $("#row-plot19").hide();
    }

    $('#loadingSpinner').hide();
                                

    // Reinitialize DataTable after updating the DOM
    initializeDataTables();
    initializeCascadeTables();
    initializeFacTables();
                                
    },
  error: function (error) {
  console.log('Error:', error); // Log any errors to the console

    $('#loadingSpinner').hide();
    }
    });
    }       

    $('#dashboard_form').on('submit', submitForm);                  

    });

    // Function to initialize DataTables dynamically based on table classes
    function initializeDataTables() {
    // Find all table elements and initialize DataTable for each
    $('table').each(function () {
    const tableClass = $(this).attr('class');
    if (tableClass && tableClass.includes('tbl_ip')) {
    $(this).DataTable({
    colReorder: true,
    dom: 'lBfrtip', // Added 'l' for length menu
    autoWidth: true,
    scrollX: true, // Make the table scrollable horizontally
    buttons: [
    'copy', 'csv'
],
    "lengthMenu": [[5, 10, 25, 50, 154], [5, 10, 25, 50, 154]], // Length menu options
    "headerCallback": function (thead, data, start, end, display) {
    $('th', thead).css('font-size', '12px');
},
   "createdRow": function (row, data, dataIndex) {
    $('td', row).css('font-size', '12px');
}
    });
   }
   });
   }
</script>


## Backend
data_response = {}            

@app.route('/Request_Returned', methods=['GET', 'POST'])
def Request_Returned():
if request.method == 'POST':
    data = request.json
    if not data:
        return "Bad Request: No JSON data found", 400
elif request.method == 'GET':
    # data = request.args
    return render_template('tmd_curr_rpt.html')

# Extract the selected options from the form data using AJAX request (Access the form data)
selected_indicator = data.get('indicator')
selected_ip = data.get('selectedIP') 

data_response = {}

if selected_indicator == 'TX_CURR' and selected_ip == 'CIHP':
    data_1 = tx_curr_temp_tbl[tx_curr_temp_tbl['IP'] == selected_ip] 

# Number of facilities
fac_num_curr_dict = int(data_1['DATIMCode'].nunique())     

plot19_html = tx_curr_temp_tbl.to_html(index=False, classes=['tbl_ip', 'table table-bordered',"display"], escape=False)

data_response = {
  'fac_num': fac_num_curr_dict,            
  'plot19': plot19_html
    }     
    
if not data_response:
return jsonify({"error": "No data found"}), 204

return jsonify(data_response)

The table(s) display fine at first submission, but if I submit a request, select another indicator and submit, the table(s) lose all of dom, autoWidth, scrollX, and buttons configurations.

enter image description here This is the output on landing and only when I reload the page.

enter image description here This is the output whaen I don’t reload/refresh the page before another form submission.