Wiring up a custom button in BigCommerce Stencil

I'm trying to wrap my head around how to wire up a simple button in BigCommerce Stencil. I've been using this platform for about 24 hours now, so any help you can give is MUCH appreciated!! I haven't used Handlebars.js or jQuery in a few years so I'm pretty rusty.

I'm using the Cornerstone Theme.

What I'm looking to do is:

1. Click a button
2. Array of objects sent to my JS function
3. JS Function adds all the items in the array to the cart.

I feel like this shouldn't be that hard, but where I am getting stuck is.

1. Getting data that is available in the HTML to be available to my function.

    handleButtons() {
        $('#add-all-to-cart').on('click', (event) => this.addAllItemsToCart(event));
        $('#remove-all-from-cart').on('click', (event) => this.removeAllFromCart(event));
    }

    //I want to supply {{category.products}} from the HTML
    addAllItemsToCart(e) {
        console.log('Adding all items to cart');
    }

    removeAllFromCart(e) {
        console.log('Removing all items from cart');
    }

And on the HTML side, I have

        //This seems to be the way other buttons were made in the Theme
        <input  id='add-all-to-cart' 
             data-wait-message="{{lang 'products.adding_to_cart'}}"
             class="button button--small"
             type="submit"
             value="{{lang 'products.add_all_to_cart'}}" />
        <input
            id="remove-all-from-cart"
            data-wait-message="{{lang 'products.adding_to_cart'}}"
            class="button button--small"
            type="submit"
            value="{{lang 'products.remove_all_from_cart'}}" />