How to place a color picker field into my plugin admin tab

I'm creating a plugin that has a few tabs for better organisation. I'm trying to place a color picker on the plugin settings page under a tab I've called checkout. I've tried following the documentation which places a text field but no color picker. /

I'm not sure what I've done wrong. This is my first plugin and I'm obviously doing something wrong.

So far I've set the tabs in the following folder some-plugin/admin/some-plugin.php (lousy name at the moment, but when it works I'll cange it). I've also added the JS code to some-plugin/admin/js/my-script.js

The tabs display content fine, but I can't get the color picker to work. It shows the text field but when you click on it nothing happens.

What am I doing wrong?

edit to show current code. I'm trying to place the color picker in the last tab at the end of the code snippet. Easier to find that way

// start from the settings setup
function wcuc_admin_settings_setup() {
add_options_page('New Plugin Settings', 'New Plugin Settings', 'manage_options', 'wcuc-settings', 'wcuc_admin_settings_page');
}
add_action('admin_menu', 'wcuc_admin_settings_setup');
function wcuc_admin_settings_page(){
global $wcuc_active_tab;
$wcuc_active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'welcome'; ?>

<h2 class="nav-tab-wrapper">
<?php
    do_action( 'wcuc_settings_tab' );
?>
</h2>
<?php
    do_action( 'wcuc_settings_content' );
}
add_action( 'wcuc_settings_tab', 'wcuc_welcome_tab', 1 );
function wcuc_welcome_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'welcome' || '' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=welcome' ); ?>"><?php _e( 'Welcome', 'wcuc' ); ?> </a>
<?php
}
add_action( 'wcuc_settings_content', 'wcuc_welcome_render_options_page' );

function wcuc_welcome_render_options_page() {
global $wcuc_active_tab;
if ( '' || 'welcome' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Welcome', 'wcuc' ); ?></h3>
    <img src="/wp-content/plugins/some-plugin/images/banner-772x250.png" alt="Welcome to my plugin" />
        <h3>What does this plugin do?</h3>
        <p>Lots. Just ask me...</p>
        <br>
        <h3>Cool heading</h3>

           <ul>
               <li>Cool item 1</ul>
               <li>Cool item 2</ul>
               <li>Cool item 3</ul>
               <li>Cool item 4</ul>
           </ul>

<?php
}
add_action( 'wcuc_settings_tab', 'wcuc_shop_tab' );
function wcuc_shop_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'shop-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=shop-tab' ); ?>"><?php _e( 'Shop Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_shop_render_options_page' );

function wcuc_shop_render_options_page() {
global $wcuc_active_tab;
if ( 'shop-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Shop Page Customizer', 'wcuc' ); ?></h3>
<p>some stuff</p>
<?php
}
// product tab
add_action( 'wcuc_settings_tab', 'wcuc_product_tab' );
function wcuc_product_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'product-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=product-tab' ); ?>"><?php _e( 'Product Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_product_render_options_page' );

function wcuc_product_render_options_page() {
global $wcuc_active_tab;
if ( 'product-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Product Page Customizer', 'wcuc' ); ?></h3>
<p>Product page stuff</p>
<?php
}
// cart tab
add_action( 'wcuc_settings_tab', 'wcuc_cart_tab' );
function wcuc_cart_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'cart-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=cart-tab' ); ?>"><?php _e( 'Cart Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_cart_render_options_page' );

function wcuc_cart_render_options_page() {
global $wcuc_active_tab;
if ( 'cart-tab' != $wcuc_active_tab )
    return;
    ?>

    <h3><?php _e( 'Cart Page Customizer', 'wcuc' ); ?></h3>
    <p>Cart page stuff</p>
      <?php
  }
      // checkout tab
add_action( 'wcuc_settings_tab', 'wcuc_checkout_tab' );
function wcuc_checkout_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'checkout-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=checkout-tab' ); ?>"><?php _e( 'Checkout Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_checkout_render_options_page' );

function wcuc_checkout_render_options_page() {
global $wcuc_active_tab;
if ( 'checkout-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Checkout Page Customizer', 'wcuc' ); ?></h3>

        <p>Checkout page stuff</p>
<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />       

            <?php
add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
 if($hook_suffix == 'wcuc_admin_settings_page-checkout-tab') {
// first check that $hook_suffix is appropriate for your admin page
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
 }
}
            ?>
<?php
}

JS code is admin/js/my-script.js. No console errors, but no response when I click the text field either

jQuery(document).ready(function($){
 $('.my-color-field').wpColorPicker();
alert("dang");
});