Meta Slider - Flex Slider Add Counter

/**
 * INSTALLATION: this code should be pasted into your theme's functions.php file.
 *
 * This code will display a counter in the form of "X / Y" (where X is the current slide and Y is the total number of slides) below the slideshow.
 */
function metaslider_add_counter_div($options, $slider_id, $settings) {

    $options['start'][] = "
	    var container = $('<div />').addClass('counter_{$slider_id}').css({
	        'text-align' : 'center', 
	        'margin-top' : '10px'
	    });
	    
	    var count = $('<span />').addClass('counter_count_{$slider_id}').html('1');
	    var total = $('<span />').addClass('counter_total_{$slider_id}').html(slider.count);

	    $('#metaslider_{$slider_id}').after(container.append(count).append(' / ').append(total));
    ";

    $options['after'][] = "$('.counter_count_{$slider_id}').html(slider.currentSlide + 1);";

    return $options;
}
add_filter('metaslider_flex_slider_parameters', 'metaslider_add_counter_div', 10, 3);

Hallo,

I found this code pretty helpful and could add it to my Meta Slider.
But as I use sereveral sliders it would be helpful not to have single IDs for the sliders but a general class so I can add the css and especially the media queries more easily. I would be happy about any advice.

Fides