Subcategory Dependent Dropdown with a Custom PageUrl

I am trying to load subcategory dependent dropdown with the AJAX script on a custom {pageUrl}. For example, I have a custom page {pageUrl} which is called Dadobot. I encounter a problem trying to pass a current page (i.e. Dadobot) to my routes.php by using AJAX script.

View.php

<div class="form-group">
      <label for="description">Category <i class="fa fa-asterisk" style="color: red; font-size: 10px;" aria-hidden="true"></i></label>
             <div class="form-inline">
                    <select name="category" id="category" class="form-control" size="10" style="width: 300px;">
                           @foreach ($categories as $category)
                                  <option value="{{ $category->id }}">{{ $category->category }}</option>
                           @endforeach
                     </select>
                     <select name="subcategory" id="subcategory" class="form-control" size="10" style="width: 300px;">

                     </select>
             </div>
</div>

Routes.php

Route::get('page/{pageUrl}/managements/add-new-product', [
        'uses' => '\App\Http\Controllers\Page\PageController@showAddProductForm',
        'as' => 'page.pagemanagement.addNewProduct',
    ]);

Route::get('page/{pageUrl}/managements/add-new-product/next', [
        'uses' => '\App\Http\Controllers\Page\PageController@showAddProductForm2ndStep',
        'as' => 'page.pagemanagement.addNewProductNext',
    ]);

JS script:

$(document).ready(function() {
        $('#category').on('change', function() {
            var categoryID = $(this).val();
            if(categoryID) {
                $.ajax({
                    type: "GET",
                    url: 'page/'+pageUrl+'/managements/add-new-product/next',                   <--- Not sure what I should do with the pageUrl.
                    data: 'category_id='+categoryID,
                    success:function(data) {
                        $('#subcategory').empty();
                        $.each(data, function(index, subcategoryObj) {

                            $('#subcategory').append('<option value="'+subcategoryObj.id +'">'+ subcategoryObj.name +'</option>');
                        });
                    }
                });
            }
        });
    });

Thanks.

Edited: I have changed the url in JS script to

url: 'page/{{ $page->page_url }}/managements/add-new-product/next',                   <--- Not sure what I should do with the pageUrl.

From view page source, it seems like it gets the current pageUrl, but the AJAX script is not working.

I got this error from console

add-new-product:254 Uncaught ReferenceError: $ is not defined(anonymous function) @ add-new-product:254