WordPress, jQuery UI and WooCommerce integration

I’m attempting to integrate some jQuery in to a WordPress site. I’m having difficulties with this though. I’m attempting to load the scripts inside a Tab.

I’m adding scripts using the the following method, in function.php (child theme):

add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts' );

function test_enqueue_scripts() {
    if ( is_product()) {
        wp_enqueue_script('finance.js', get_stylesheet_directory_uri() . '/js/finance.js', array('jquery'), 'ver 1', false);
        wp_enqueue_script('jquery.js', get_stylesheet_directory_uri() . '/js/jquery-1.10.2.js', array('jquery'), 'ver 1', false);
        wp_enqueue_script('foundation.js', get_stylesheet_directory_uri() . '/js/jquery-ui.js', array('jquery'), 'ver 1', false);
    }
}

The scripts appear in the head tag when inspecting a page in a browser.

I’m then adding a tab, using a filter, also in function.php. As below:

add_filter( 'woocommerce_product_tabs', 'woo_finance_tab' );

function woo_finance_tab( $tabs ) {     
    $tabs['finance_tab'] = array(
        'title'     => __( 'Finance Options', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_finance_tab_content'
    );    
    return $tabs;    
}

function woo_finance_tab_content() {   
    require ( get_stylesheet_directory() . '/woocommerce/single-product/finance/loan-calc.php' );       
}

I’m then using some inline script within the loan-calc.php page. The problem is the script isn’t firing. It fires on page load, but not when a user selects a tab. Does anyone know of a way I can remedy this?

<script>
    $(function() {
    $( "#slider" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  });
</script>

<div>
    <p>
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider"></div>

</div>