Jquery code won't run loaded from WP, but run from console

Question

I'm trying to get a value and pass it to a hidden input in order to send form data via $_POST. I have a dropdown button and the following code in order to update the value:

jQuery(document).ready(function($){

    var espSeleccionada = $('button[data-id="select-especialidad"]');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find('option:selected').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).text();
        // and update the hidden input's value
        $('#boton-prueba').text(x);
    });

});

The code is supposed to pass the value from one button to another, as shown in here the example, but, when I load the code from WordPress nothing happens. Instead, when I write it on the console it works fine. There are no JS errors in console.

Please note that I'm using .text() to test if the code works, but it would have .val() before going live.

This is the button HTML:

<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="select-especialidad" title="Hacienda" aria-expanded="false"><span class="filter-option pull-left">Hacienda</span></button>

Here is an example.

EDIT TO CLARIFY HOW I AM ADDING THE CODE TO IN WORDPRESS:

I add the script via functions.php. This is my code:

function loading_my_scripts() {
    wp_enqueue_style( 'buscopreparador-style', get_stylesheet_uri() );
    wp_deregister_style( 'buscopreparador-style' );

    if ( !is_admin() ) {

        wp_enqueue_style( 'styles', get_template_directory_uri() . '/assets/css/styles.css' );
        wp_enqueue_style( 'vertical-tabs', get_template_directory_uri() . '/assets/css/bootstrap.vertical-tabs.min.css' );
        wp_enqueue_style('bootstrap-select-css', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css' );
        wp_enqueue_style( 'open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic,700,700italic');

        wp_deregister_script( 'jquery' );
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, false, TRUE );
        wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', false, false, TRUE );
        wp_register_script('bootstrap-tabcollapse', get_template_directory_uri() . '/assets/js/bootstrap-tabcollapse.js', false, false, TRUE );
        wp_register_script('bootstrap-select', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js', false, false, TRUE );
        wp_register_script('theme-js', get_template_directory_uri() . '/assets/js/theme.js', array('jquery'), false, TRUE );

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'bootstrap' );
        wp_enqueue_script( 'bootstrap-tabcollapse' );
        wp_enqueue_script( 'bootstrap-select' );
        wp_enqueue_script( 'theme-js' );
    }

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'loading_my_scripts' );

The code is in theme.js file which looks like this:

( function( $ ) {
    var num_cols = 3,
    container = $('#menu-preparadores-de-oposiciones-en'),
    listItem = 'li',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($('<ul ></ul>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });

    if ($("body").hasClass("page-id-64")) {
      $('.tab-content').addClass('col-sm-9');
      $('#custom-tabs-0').tabCollapse();
    } 

} ) ( jQuery );

jQuery(document).ready(function($){

    var espSeleccionada = $('button[data-id="select-especialidad"]');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find('option:selected').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).html();
        // and update the hidden input's value
        $('#boton-prueba').html(x);
    });

}); 

( function() {
    var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
        is_opera  = navigator.userAgent.toLowerCase().indexOf( 'opera' )  > -1,
        is_ie     = navigator.userAgent.toLowerCase().indexOf( 'msie' )   > -1;

    if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
        window.addEventListener( 'hashchange', function() {
            var id = location.hash.substring( 1 ),
                element;

            if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
                return;
            }

            element = document.getElementById( id );

            if ( element ) {
                if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
                    element.tabIndex = -1;
                }

                element.focus();
            }
        }, false );
    }
})();

Answer 1

Ok, the code is fine, the problem is that the target button[data-id="select-especialidad"] is being used by bootstrap-select and even if the script load before my code, it takes a few seconds or less to process the information.

So the code should be wrapped after a function that checks that the event has been loaded. This is the final code:

$('#select-especialidad').on('loaded.bs.select', function (e) {
    var y = $(this).val();
    $('#select-especialidad-hidden').val(y);

    var espSeleccionada = $('button[data-id="select-especialidad"] > span.filter-option.pull-left');
        espSeleccionada.on("click", function() {
            var x = $(this).text();
            $('#select-especialidad-hidden').val(x);
        });
});

loaded.bs.select here more info on the bootstrap-select events.