Trying to make this working with simple_form.

[levi-damian-gazoomobile]

I am using Rails 5 and Bootstrap wth single_forn.
I am able to select the country correctly.
But when I am trying to select a state or a city I am getting only "Toshkent Shari" from Uzbekistan and no city no matter which country I selected.
It may be the case I an not using the right paratemetes in the form to be used by the two scripts I developed based on the models shown in this blog.
He are my application relevant files.

application_controller.rb

class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
def index
end
def states
render json: CS.states(params[:country]).to_json
end
def cities
render json: CS.cities(params[:state], params[:country]).to_json
end
end

routes.rb

Rails.application.routes.draw do
resources :contacts
root to: "application#index"

get 'states/:country', to: 'application#states'
get 'cities/:state', to: 'application#cities'
end

_form.rb

<%= simple_form_for(@contact) do |f| %>
<%= f.error_notification %>

<%= f.input :name %>

<%= f.input :country, required: true, hint: 'select country', label: 'Country' do %>
  <%= f.select :country,
    CS.countries.map {|r| [r[1], r[0]] },
    include_blank: false
  %>
<% end %>

<%= f.input :state, required: true, hint: 'select state or province', label: 'State or Province' do %>
  <%= f.select :state,
    CS.states(params[:country]).map {|r| [r[1], r[0]] },
    include_blank: false
  %>
<% end %>

<%= f.input :city, required: true, hint: 'select city', label: 'City' do %>
  <%= f.select :city,
    CS.cities(params[:state], params[:country]).map {|r| [r]},
    include_blank: false
  %>
<% end %>

<%= f.input :address %>
<%= f.input :phone %>
<%= f.input :email %>

<%= f.button :submit %>

<% end %> <script> $('#contact_country').change(function () { var input_country = $(this); var states_of_country = $("#contact_state"); if($(this).val() == "") { states_of_country.html(""); } else { $.getJSON('/states/' + $(this).val(), function (data) { //states_of_country.empty(); var opt = 'Select City'; console.log(data); if(data.length == 0){ } else { data.forEach(function(i) { opt += '' + i + ''; states_of_country.html(opt); }); } }); } }); </script> <script> $('#contact_state').change(function () { var input_state = $(this); var cities_of_state = $("#contact_city"); if($(this).val() == "") { cities_of_state.html(""); } else { $.getJSON('/cities/' + $(this).val(), function (data) { // cities_of_state.empty(); var opt = 'Select City'; console.log(data); if(data.length == 0){ } else { data.forEach(function(i) { opt += '' + i + ''; cities_of_state.html(opt); }); } }); } }); </script>

Due to the use of the simple_form the IDs of the elements in the DOM are "contact_country", "contact_state" and "contact_city"

Any help to fix this is much appreciated.