How to pass product's id to bootstrap modal

Question

I have product and order models. Product has many orders and order belongs to product. There is a button 'Order' on product's page, when a user clicks on it, a bootstrap modal opens up. On this modal I render order's form to create a new one.

I want to know, how to pass a product's id to this form on modal? Currently my button to open modal look like this:

%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Order

And the modal itself:

 #myModal.modal.fade{:role => "dialog"}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{"data-dismiss" => "modal", :type => "button"} ×
        %h4.modal-title Order form
      .modal-body
        = render 'orders/form'
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

I need this product's id to create a new order, which will belong to the product. If I think in wrong direction, please, correct me.

Many thanks in advance for help!

UPDATE Solved!! Many-many-many thanks to Arup Rakshit (@ArupRakshit)!!!

  - @products.last(3).each do |product|
     %h4= product.name
     %button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: product.id}} Order

    #myModal.modal.fade{:role => "dialog"}
      .modal-dialog
        .modal-content
          .modal-header
            %button.close{"data-dismiss" => "modal", :type => "button"} ×
            %h4.modal-title Order Form
          .modal-body
            #new_order
              = render 'orders/form', product: product
          .modal-footer
            %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close   

orders/form:

= form_for Order.new do |f|
  = f.hidden_field :product_id
  = f.text_field :user_name, placeholder: 'Name', class: 'form-control'  
  = f.submit 'Order', class: 'btn btn-primary'

application.js:

$( document ).ready(function() {
 $('body').on('shown.bs.modal', '#myModal', function (e) {
  var product_id = $(e.relatedTarget).data('product-id');
  $('#order_product_id').val(product_id);
 });
});

Answer 1

Keep the product in the modal button using data attribute. Like

%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: @product.id}} Order

Inside the form add the hidden field:

= form_for Order.new do |f|
  .form-group
    = f.text_field :user_name, placeholder: 'Name', class: 'form-control'
    = f.hidden_field :product_id

You need to use below JS, to populate the hidden field value.

$('body').on('shown.bs.modal', '#myModal', function (e) {
  var product_id = $(e.relatedTarget).data('product-id');
  $('#order_product_id').val(product_id);
 });

#new_order is the form ID, change it to yours one. Bootstrap modal events.