jQuery wordpress customizer with layers theme open widget on click

I use a wordpress theme called layers, it has it’s own layout builder that uses custom widgets to add content to a page.

I am trying to develop a user onboarding plugin for this when a user enters the customizer for the first time. What I am trying to ahieve is when a user clicks “Next” on step 4 (the button has the class .step4), the layers widget opens in the customizer.

I can see that within layers there is a function called layers_expand_widget which I am trying to bind to a on click event.

Here is the contents of the layers_expand_widget function:

function layers_expand_widget( $widget_li, $widget, e ){

    // Instant user feedback
    $widget_li.addClass('layers-focussed');

    // Instantly remove other classes
    $('.layers-focussed').not( $widget_li ).removeClass('layers-focussed layers-loading');

    // Handle the first time Init of a widget.
    if ( !$widget_li.hasClass( 'layers-loading' ) && !$widget_li.hasClass( 'layers-initialized' ) ){

        $widget_li.addClass('layers-loading');
        $widget_li.addClass( 'layers-initialized' );

        if ( 'click' === e.type ) {
            // If event is 'click' it's our early invoked event so we can do things before all the WP things
            setTimeout(function(){
                $widget.trigger( 'layers-interface-init' );
            }, 50 );
        } else {
            // If event is 'expand' it's a WP invoked event that we use as backup if the 'click' was not used.
            // eg 'shift-click' on widget in customizer-preview
            $widget.trigger( 'layers-interface-init' );
        }
    }
}

And here is my script (which is loaded after the above code).

jQuery('.step4').on('click', function (e) {
    var $widget_li = $('#customize-control-widget_layers-widget-column-30');
    var $widget = $widget_li.find( '.widget' );
    layers_expand_widget( $widget_li, $widget, e );
});

Currently my script does nothing, is there something obvious I am missing?

UPDATE: Here is my full js code:

jQuery(document).ready(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div class="so_overlay"></div>').insertBefore('body.wp-customizer');

  $('.so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="next">NEXT</button><button id="prev">PREVIOUS</button></div>');

// here's the steps
 var steps = [
   "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step4.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step5.php",
 ];
 var classes = [
   "step1",
   "step2",
   "step3",
   "step4",
   "step5",
 ]
 counter = 0;
 $('.onboarding_steps').load(steps[counter]);
 $('#next').click(function () {
   counter = (counter + 1) % steps.length; 
   $('.onboarding_steps').load(steps[counter]); 
   $('#onboarding_steps_container, .button_holder button').attr('class', 'step' + (counter + 1)); 
   $('body').attr('onboarding_step', 'step' + (counter + 1)); 
 });

  $( 'button #next.step2' ).on("click", function(){
    alert('im here');
  });

});