Shortcode appeared twice on page, one time before content, one time where it's really called

Question

Here is my shortcode, located in functions.php of my child theme.

//* [dropdown]
function mrb_sc_dropdown( $atts ){
    $page_id = get_the_id();
    $page_title = get_the_title();
    $mrb_dropdown_param = array (
        'depth' => 1,
        'class' => '',
        'show_option_none' => __( 'Découvrez nos ' . $page_title, 'jlabst' ),
        'name' => 'dropdown',
        'hide_empty' => false,
        'post_type' => 'page',
        'child_of' => $page_id,
        'value_field' => 'id'
    );
    $dropdown = wp_dropdown_pages( $mrb_dropdown_param );
    wp_enqueue_script('dropdown_link', get_bloginfo('stylesheet_directory') . '/js/dropdown-link.js', null, '', true);

    return $dropdown;
}
add_shortcode( 'dropdown', 'mrb_sc_dropdown' );

Here is the dropdown-link.js associated with the shortcode. Note that it works with the first dropdown (before content) and not the second. I presume it's because of ID conflict.

var dropdown = document.getElementById("dropdown");
function onPageChange()
  {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 )
    {
      location.href = "/?page_id="+dropdown.options[dropdown.selectedIndex].value;
    }
  }
dropdown.onchange = onPageChange;

Any idea why it appear before content? I'm using return $arg; as asked by WordPress API... I have tried with ob_start(); and return ob_get_clean($dropdown); and I get the same result...

Any hints folks? Thanks for your help!