title: Dynamic checkbox does not saves to database
body: <p>I am trying to save the products based on the filtering of make, model and body type of the four Wheeler.</p>
  
  <p>I have issue in saving the product details to the database / nor getting the selected products_ids.</p>
  
  <p>The products are displayed in result div, this is dynamically generated through javascript.</p>
  
  <p>ex:<code>checkOptions += '&lt;div class="col-xs-12 col-sm-12 col-md-4"&gt;' +'&lt;label&gt;' + '&lt;input type="checkbox"  id="service_product_ids" name="service[product_ids][]" value='+ result[i].id + '&gt;' + result[i].name + '&lt;/label&gt;' + '&lt;/label&gt;' +'&lt;/label&gt;' + '&lt;/div&gt;';</code></p>
  
  <p>But when I hit submit button, the product ids are not getting saved / passed to the controller.</p>
  
  <pre><code> def service_params
    params.require(:service).permit(:name, :cost, :description, :hours, :body_type, :tax_id, :operation_category_id, products_attributes: [:id, :name, :description, :brand, :cost, :product_color, :selling_price, :tax_id, :_destroy],service_varients_attributes: [ :body_type, :make, :model, :cost, :id, :_destroy], service_product_ids: [], product_ids: [])
  end
  </code></pre>
  
  <p>controller create and new action</p>
  
  <pre><code>    def new
    if (params[:make_id].present? &amp;&amp; !params[:body_type].present?)
      make = Make.find(params[:make_id])
      @model_name = make.models 
      render json: @model_name
    elsif params[:body_type].present?
      @products = Product.includes(:product_varients).where(product_varients: { body_type: params[:body_type], make: params[:make_id], model: params[:model_id] })
      puts "----products count----------"
      puts @products.count
      puts "--------------"
      render json: @products
      @service = Service.new
      @service.products.build
      @service.service_varients.build
    else
    @service = Service.new
    @service.products.build
    @service.service_varients.build
    end   
  end 
  
  def create
    @service = Service.new(service_params)
    respond_to do |format|
      if @service.save
        format.html { redirect_to @service, notice: 'Service was successfully created.' }
        format.json { render :show, status: :created, location: @service }
      else
        format.html { render :new }
        format.json { render json: @service.errors, status: :unprocessable_entity }
      end
    end   
  end
  </code></pre>
  
  <p>model relation:</p>
  
  <pre><code> Product belongs_to services
   services has_many products.
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code> $('#service_service_varients_attributes_0_body_type' ).change(function(){
          var make = $('#service_service_varients_attributes_0_make').val();
  
          var checkOptions = '', objectlength, result = {};
          var model = $('#categoriesDiv').val();
          var body_type = $('#service_service_varients_attributes_0_body_type').val();
          if ("#service_service_varients_attributes_0_make" != null ){
          jQuery.ajax({
              url: "&lt;%= new_service_path %&gt;",
              type: "GET",
              data:'make_id='+ make+'&amp;model_id='+ model+'&amp;body_type='+ body_type,
              dataType: "html",
              success: function (data) {
            result = JSON.parse(data)
            console.log(result);
            objectlength = result.length;
            for (var i = 0; i &lt; objectlength; i++) {
               checkOptions += '&lt;div class="col-xs-12 col-sm-12 col-md-4"&gt;' +'&lt;label&gt;' + '&lt;input type="checkbox"  id="service_product_ids" name="service[product_ids][]" value='+ result[i].id + '&gt;' + result[i].name + '&lt;/label&gt;' + '&lt;/label&gt;' +'&lt;/label&gt;' + '&lt;/div&gt;';
             }
                    $("#result").append(checkOptions);
  
          }
          });
        } else {
        jQuery('#result').html('Please Select');
        }
        });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="panel-body"&gt;   
         &lt;div class="row" id="result" &gt;
           
         &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/Hvy49.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hvy49.png" alt="enter image description here"></a></p>
  
  <p>server log
  <a href="https://i.stack.imgur.com/peNdF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/peNdF.png" alt="enter image description here"></a></p>
  
  <p>when i press ctrl+u i get the result div like this. checkbox which displays in form code is not showing here,but when i do inspect elemrnt i can see the attached input checkbox div. No idea what is happening here</p>
  
  <p><a href="https://i.stack.imgur.com/q0qrI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0qrI.png" alt="1"></a>
  please help.Any help will e appreciatable.</p>