Wordpress Shortcode associated js not working

Question

I have a plugin that creates a shortcode that outputs a form onto the page. There is nothing overly special about the form its self (just a bunch of html echo'd out). Where I am running into issues is when I need to manipulate that html with js. For some reason if I try to enqueue and register the js, none of the dynamic properties I need the form to have work but if I just put the js directly below the shortcode then everything works as expected. I normally wouldn't care if I had to do this for just esthetic js but I will also need this form to make an ajax call when the the submit button is pressed and I don't know how to do that without properly enqueueing the script. Below is the class for the Form output and the class that will just enqueue all the scripts I need:

namespace mmUserPreference;


class Form
{
public function __construct()
{
    add_shortcode('user_preference_form', array($this, 'user_preference_form_shortcode'));
}

public function user_preference_form_shortcode()
{
    //the ../ is to keep the form submit on the first page level
    $output = '<div class="user_preference_form_container">';

    $output .= '<form id="user_preference" method="post">';

    $output .= '<div class="top_nav_up">';
    $output .= '<div class="top_nav_top_row">';
    $output .= '<div class="form_title_up">Manage Your e-Alerts</div>';
    $output .= '<div class="top_nav_up_right">';
    $output .= '<div class="form_submit_up"><input type="submit" value="Save"></div>';
    $output .= '<div class="form_collapse_up"><i class="fa fa-chevron-up rotate" aria-hidden="true"></i></div>';
    $output .= '</div>';
    $output .= '</div>';


    $output .= '<ul class="tabs_up">';
    $output .= '<li class="tab_link_up current" data-tab="topics">Topics</li>';
    $output .= '<li class="tab_link_up" data-tab="stocks">Stocks</li>';
    $output .= '</ul>';
    $output .= '</div>';

    $output .= '<div class="form_content_up">';
    $output .= '<div id="topics" class="tab-content-up current">';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="stocks_field" value="true"> Stocks</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="us_economy_field" value="true"> U.S. Economy</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="stock_market_today_field" value="true"> Stock Market Today</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="technology_article_field" value="true"> Technology Article</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="global_markets_field" value="true"> Global Markets</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="top_news_field" value="true"> Top News</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="nasdaq_field" value="true"> Nasdaq.com</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="investing_ideas" value="true"> Investing Ideas</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="oil" value="true"> Oil</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="tech_stocks" value="true"> Tech Stocks</div>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '<div id="stocks" class="tab-content-up">';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="aapl" value="true"> AAPL</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="lmt" value="true"> LMT</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="ekso" value="true"> EKOS</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="noc" value="true"> NOC</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="ups" value="true"> UPS</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="tsla" value="true"> TSLA</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="vz" value="true"> VZ</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="nvda" value="true"> NVDA</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="awk" value="true"> AWK</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="rtn" value="true"> RTN</div>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '</div>';

    if(isset($_COOKIE['mmp_e'])) {

        $output .= '<input type="hidden"   name="email" value="' .  $_COOKIE['mmp_e'] . '">';

    } else {

        $output .= '<input type="text" name="email" required><br> Please enter the email address you would like these updates to be sent to. <br>';

    }

    $output .= '</form>';
    $output .= '</div>';

    echo $output;
    ?>

    <script>
//            jQuery(document).ready(function($) {
//                //for the user preference form tabs
//                $('div.user_preference_form_container    li.tab_link_up').click(function () {
//                    var tab_id = $(this).attr('data-tab');
//
//                    $('li.tab_link_up').removeClass('current');
//                    $('.tab-content-up').removeClass('current');
//
//                    $(this).addClass('current');
//                    $("#" + tab_id).addClass('current');
//                });
//
//                $('div.form_collapse_up').click(function () {
//                    $('.tabs_up').toggle('slow');
//                    $('.form_content_up').toggle('slow');
//                    $('.form_submit_up').toggle('slow');
//                    $('.form_collapse_up > .fa-chevron-up').toggleClass("down");
//                });
//            });
        </script>
        <?php
    }

}

then to enqueue the scripts

namespace mmUserPreference;


class loadScripts
{
public function __construct()
{
    add_action('wp_enqueue_scripts', array($this, 'loadScripts'));
}

public function loadScripts()
{
    wp_register_script(
        'user-preference-form-style-js',
        plugins_url('../js/mm-user-preference-form-style.js', __FILE__),
        array('jquery'),
        null,
        false);
    wp_register_script(
        'user-preference-form-submit-js',
        plugins_url('../js/mm-user-preference-form-submit.js', __FILE__),
        array('jquery'),
        null,
        true);
    wp_register_style(
        'user-preference-form-style-css',
        plugins_url('../css/mm-user-preference-form.css', __FILE__)

    );

    wp_enqueue_script('user-preference-form-style-js');
    wp_enqueue_script('user-preference-form-submit-js');
    wp_enqueue_style('user-preference-form-style-css');
}
}

Then the main plugin file just looks something like this right now:

/*
Plugin Name: ******
Description: *****
Version:     1.0.0
Author:      ******
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

include 'classes/Form.php';
include 'classes/loadScripts.php';

use mmUserPreference\Form;
use mmUserPreference\loadScripts;
use mmUserPreference\sendEmail;
use mmUserPreference\userQuery;

$userPrefScripts = new loadScripts();
$userPrefForm = new Form();

Any ideas where I am going wrong?

Answer 1

So for whatever reason I had to load my scripts at the 'wp_footer' hook in order for my shortcode to be effected by the js ie:

add_action('wp_footer', array($this, 'loadScripts'));