Adding Timezone dropdown to vendor settings page

I’ve been trying to implement a Timezone setting for vendors, but I need some help with it.
I have summarized what I have done so far below, but I’m open to any solution that lets vendors set and save their timezones.
Can you help me on how to do that in any way?

First, I tried placing it in general settings, like this:

add_filter ( 'wcfm_marketplace_settings_fields_general', 'add_vendor_timezone_setting', 20 );
function add_vendor_timezone_setting($settings_fields_general){
    $vendor_id = $settings_fields_general['vendor_id']['value'];
    $vendor_data = get_user_meta( $vendor_id, 'wcfmmp_profile_settings', true );
    if( !$vendor_data ) $vendor_data = array();
    $timezone_list = DateTimeZone::listIdentifiers(DateTimeZone::ALL);
    $vendor_timezone = isset( $vendor_data['timezone'] ) ? $vendor_data['timezone'] : '';
    $settings_fields_general['timezone']= array(
        'label' => __( 'Timezone', 'wc-frontend-manager' ),
        'type' => 'select',
        'options' => $timezone_list,
        'priority' => 50,
        'class' => 'wcfm-text wcfm_ele',
        'label_class' => 'wcfm_title wcfm_ele',
        'value' => $vendor_timezone,
    );
    return $settings_fields_general;
}

add_action( 'wcfm_vendor_settings_update', function( $vendor_id, $wcfm_settings_form ) {
	global $WCFM, $WCFMmp;
	if( isset( $wcfm_settings_form['timezone'] ) ) {
	    update_user_meta( get_current_user_id(), 'vendor_timezone',  $wcfm_settings_form['timezone'] );
    }
}, 500, 2 );

If I do this, strangely it creates TWO dropdowns on the same page. (see screenshot)
Also, saving the data doesn’t work at all.

I also tried putting the dropdown on a separate tab, and using AJAX for saving:

(js)

$(document).on('click', '#wcfm_settings_save_button', function (e) {
            e.preventDefault();
            var user_timezone = jQuery('#vendor-timezone').val();
            if ( user_timezone !== "" ) {
                jQuery.post(
                        ajaxurl,
                        {
                            'action': 'update_vendor_timezone',
                            'user_timezone': user_timezone,
                        },
                        function(response) { alert(response); }
                );
            }
        });

(php)

add_action('wp_ajax_update_vendor_timezone', 'update_vendor_timezone');

function update_vendor_timezone(){
        if(isset($_POST['user_timezone'])){        
            update_user_meta(get_current_user_id(), 'vendor-timezone', $_POST['user_timezone']);
        }
        die();
    }

Thanks a lot for your help in advance.