Rails: Dynamic select menu

[Pepeng Agimat]

I'm following the tutorial of railscast #88 Dynamic select menus. I got an error in jquery part of it. I'm not a familiar in jquery I just follow his tutorial, I already searched the error.

Error on console

Uncaught Error: Syntax error, unrecognized expression: $serviceprovider_service_id :

_form.html.erb
<%= form_for(@serviceprovider, html: { :multipart => true }, class: 'form-horizontal') do |f| %>

      <div class="form-group">
            <label class="client-login-label">Service</label>
            <%= collection_select(:serviceprovider, :service_id, Service.all, :id, :service, prompt: 'Choose Service') %>
            <%#= f.text_field :barangay, class: 'form-control client-login-field', placeholder: 'Barangay' %>
      </div>

      <div class="form-group">
            <label class="client-login-label">Category</label>
            <%= grouped_collection_select(:serviceprovider, :category_id, Service.order(:service), :categories, :service, :id, :name, prompt: 'Choose Category') %>
            <%#= f.text_field :barangay, class: 'form-control client-login-field', placeholder: 'Barangay' %>
      </div>

      <div class="form-group">
        <%= f.submit("Register", class: 'btn btn-lg btn-success client-signin-btn') %>
      </div>
    <% end %>
serviceprovider.js.coffee
jQuery ->
    categories = $('#serviceprovider_category_id').html()
    $('#serviceprovider_service_id').change ->
        service = $('#serviceprovider_service_id :selected').text()
        options = $(categories).filter("optgroup[label='#{service}']").html()
        if options
            $('#serviceprovider_category_id').html(options)
        else
            $('#serviceprovider_category_id').empty()