Rails: Cannot set the value of text_field with jquery

Question

I am trying to update the value of an item codenumber field every time the user selects an item from a list using jquery. My view is like this.

<tr class="nested-fields">
  <td style="width:180px">
    <%= f.text_field :codenumber, class: "col-form-label form-control item_codenumber" %>
  </td>
  <td style="width:280px">
    <%= f.collection_select :description, Item.order(description: :asc), :id, :description, {:include_blank => true}, {:class=>'col-form-label form-control items_select'} %>
  </td>
  <td style="width:30px">
    <%= f.text_field :quantity, class: "col-form-label form-control qty" %>
  </td>
  <td style="width:100px">
    <%= f.text_field :unit_cost, class: "col-form-label form-control cost" %>
  </td>
  <td style="width:50px">
    <button type="button" class="btn btn-info btn-sm">
      <span class="item_cost"><%= f.object.effective_cost %></span> 
    </button>
  </td> 
  <td style="width:50px">
    <%= link_to_remove_association "Remove", f, class: "remove_fields fa-solid fa-trash fa-2x red" %>
  </td>
</tr>

I am making an ajax call with jquery

  $(document).ready(function() {
    $(document).on('change', '.items_select', function() {
      
      //var row = $(this).parents('.item-row'); 
      var row = $(this).parents('tr'); 
      var item_id = row.find('.items_select').val()  /*get the id of the item selected*/
      var cost_field_id = row.find('.cost').attr('id')   /*get the id of the corresponding cost field to be updated*/
      var codenumber_field_id = row.find('.item_codenumber').attr('id')   /*get the id of the corresponding cost field to be updated*/
      
      $.ajax({
        url: "update_item_cost",
        data: {
          item_id : item_id,
          cost_field_id : cost_field_id,
          codenumber_field_id : codenumber_field_id
        },
        dataType: "script"
      });
    });
  });

to the controller

 #will update item cost and codenumber
  def update_item_cost

    item_id = params[:item_id]
    @item_cost = Item.find(item_id).price
    @item_codenumber = Item.find(item_id).codenumber
    
    @cost_field_id = params[:cost_field_id].to_s
    @codenumber_field_id = params[:codenumber_field_id].to_s
   
    #required so the corresponding js.erb file is rendered
    respond_to do |format|
      format.js
    end
  end

Finally, my js.erb file looks like this

<!--gets the field with id @cost_field_id and assigns it the value @item_cost-->
$("#<%= @cost_field_id %>").val(<%= @item_cost %>);
<!--gets the field with id @codenumber_field_id and assigns it the value @item_codenumber-->
$("#<%= @codenumber_field_id %>").val(<%= @item_codenumber %>);

It all works like charm with simple codenumbers like "1000" or "1000.001" but when an item has a codenumber of the form "90-110" the value -20 is passed to the codenumber field (90-110=-20). What is even worse, when an item has a complicated codenumber like "100.40.50.90", the codenumber field is not updated at all and Chrome's developer tool console throws a "VM1191:4 Uncaught SyntaxError: missing ) after argument list" error.

Any idea what the problem might be?

Answer 1

Answering my own question. The problem was that <%= @item_codenumber %> should be put inside brackets in order to work. So the correct syntax is

$("#<%= @codenumber_field_id %>").val("<%= @item_codenumber %>");