I am developing a plugin for shipping and I want to implement city/area dynamically. I have added the custom field and I want to populate the area field whenever the city is selected or changed. The area dropdown is fetched from a custom API using another action
Here is the jQuery code I am using. When the city is changed, the response shows the page is populated but like this

function cities_areas_settings() {
$text_domain = 'woocommerce';
global $woocommerce;
if (isset($_POST('liveCity'))) {
$towns = (1122 =>ABA, 1123 => IBADAN, 1124>oyo );
}
return array($towns);
}
add_action(‘wp_footer’, ‘custom_checkout_js_script’);
function custom_checkout_js_script() {
if( is_checkout() && ! is_wc_endpoint_url() ) :
// Initializing
$text_domain = ‘woocommerce’;
$karachi_areas = array( ” => __(‘Choose your area’, $text_domain) );
$areas = cities_areas_settings(); // Load settings
?><script language="javascript">
jQuery(function($) {
var a = 'select(name="billing_city")',
b = 'select(name="billing_area")',
o = <?php echo json_encode($areas); ?>,
s = $(b).html();
// Utility function to fill dynamically the select field options
function dynamicSelectOptions(opt) {
var options = '';
for (var i = 0; i < opt.length; i++) {
console.log(opt.length)
options += '<option value="' + opt(i) + '">' + opt(i) + '</option>';
}
$(o).html(options);
// $.each( opt, function(key, value ){
// options += '<option value="'+key+'">'+value+'</option>';
// });
}
// On Start (once DOM is loaded)
if ($(a).val() != '') {
console.log("testa");
dynamicSelectOptions(o);
}
console.log($(a).val());
// On billing city change live event
$('form.woocommerce-checkout').on('change', a, function() {
var test = $(this).val();;
jQuery(document).ready(function($) {
var data = {
'action': 'my_action',
'liveCity': test
};
jQuery.post(window.location, data, function(response) {
// console.log('Got this from the server: ' + response);
});
});
var testing = dynamicSelectOptions(o);
console.log(testing);
});
});