Execute shortcode only on click

Hi,

I’m looking into a way of filtering hikes on a map based on the length of the route. I have written a script to filter and made a shortcode to be able to use it. It works when i put it on a page and let the page load.

However, I want to make the website dynamic and add js to it to change the map when I click on a button. I managed to get ajax and js working and get a response but it just won’t execute the shortcode.

function my_ajax_tabs_js_scripts() {
    wp_enqueue_script( 'my_ajax_filter_search', 'https://wandeltoppers.nl/wp-content/plugins/wandeltoppers_plugins/h_ajaxtabs.js');
    wp_localize_script( 'my_ajax_filter_search', 'ajaxurl', admin_url('admin-ajax.php') );
}

function my_ajax_tabs() {
	my_ajax_tabs_js_scripts();
}
add_shortcode ('my_ajax_tabs', 'my_ajax_tabs');

function my_tab_menu() {
   $shortcode = '[leaflet_to_show min_length="0" max_length="13"]';
//	 $shortcode = '[leaflet-map]';
	 wp_send_json_success($shortcode);
  }

add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');

Js:

jQuery(document).ready(function($) {
        $('.elementor-tabs-wrapper div').click(function(e) {
            e.preventDefault();

            var tab_id = $(this).attr('id'); 
			section_id = tab_id.slice(-4);
			console.log("js fired");
			console.log(tab_id);
			console.log(section_id);
                var data = { 
					action: 'my_tab_menu', 
					id: section_id};
				$.post(ajaxurl,data).done(function(response) {
					console.log(response.data);
					console.log("'#elementor-tab-content-'+section_id");
                    $('#elementor-tab-content-'+section_id).html(response.data);   
				});
     }); 
 }); 

any thoughts?

The page I need help with: [log in to see the link]