title: Laravel 5 Multiple choice
body: <p>I am using laravel 5 for saving this form but unable to track choices and questions. This is questions form. <a href="https://i.stack.imgur.com/uYHki.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uYHki.png" alt="See form Image"></a>
    *  You can add multiple question to form and multiple choice to a question. when form is submit how can I track which choice belong to which question and which choice is correct.*</p>
  
  <pre><code>&lt;div class="col-md-10 "&gt;
              &lt;form class="form-horizontal" id="questionair_form" action="{{route('questionair.store')}}" method="POST" &gt;
                  {{csrf_field()}}
                  &lt;div id="step_1"&gt;
                      &lt;h2&gt;Create&lt;/h2&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="name"&gt;Questionair Name:&lt;/label&gt;
                          &lt;div class="col-sm-5"&gt;
                              &lt;input type="text" class="form-control" name="name" id="name" placeholder="Enter Questionair name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="duration"&gt;Duration:&lt;/label&gt;
                          &lt;div class="col-sm-3"&gt;
                              &lt;input type="text" class="form-control" name="duration" id="duration" placeholder="Enter Duration"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-2"&gt;
                              &lt;select class="form-control" name="type"&gt;
                                  &lt;option value="m"&gt;Minutes&lt;/option&gt;
                                  &lt;option value="hr" &gt;Hours&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="pwd"&gt;Can Resume:&lt;/label&gt;
                          &lt;div class="col-sm-5"&gt;
                              &lt;label class="radio-inline"&gt;
                                  &lt;input type="radio" name="resumeable" value="1"&gt;Yes
                              &lt;/label&gt;
                              &lt;label class="radio-inline"&gt;
                                  &lt;input type="radio" name="resumeable" value="0"&gt;No
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-offset-4 col-sm-10"&gt;
                              &lt;button  type="button" class="step_1 btn btn-default"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="step_2" style="display: none"&gt;
                      &lt;h2&gt;Add Questions&lt;/h2&gt;
                      &lt;div id="xyz"&gt;
                          &lt;div class="questions"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label class="control-label col-sm-4" for="email"&gt;Question Type:&lt;/label&gt;
                                  &lt;div class="col-sm-5"&gt;
                                      &lt;select  class="question_type form-control" name="question_type[]" &gt;
                                          &lt;option value="text" &gt; Text &lt;/option&gt;
                                          &lt;option value="mcso" &gt;Multiple Choice (Single Option)&lt;/option&gt;
                                          &lt;option value="mcmo" &gt;Multiple Choice (Multiple Option)&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="group"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="control-label col-sm-4" for="question"&gt;Question:&lt;/label&gt;
                                      &lt;div class="col-sm-5"&gt;
                                          &lt;input type="text" class="form-control"  name="question[]" placeholder="Enter Question"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="control-label col-sm-4" for="pwd"&gt;Answer:&lt;/label&gt;
                                      &lt;div class="col-sm-5"&gt;
                                          &lt;input type="text" class="form-control"  name="answer[]" placeholder="Enter Answer"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;hr&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4"&gt;
                          &lt;p&gt;&lt;a  id="add" style="text-decoration: underline" href="#"&gt;Add Question&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-xs-12"&gt;
                              &lt;div class="text-left"&gt;
                                  &lt;button type="submit" class="pull-left btn btn-default"&gt;Save Questions&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Java Script for changing question type .</p>
  
  <pre><code>            $(document).on('change' , '.question_type',function(e){
              question_number++;
              var $this = $(this);
              var type = $(this).val();
  
              switch(type){
                  case 'text':
                      var html =
                          '&lt;div class="form-group"&gt;'+
                              '&lt;label class="control-label col-sm-4" for="question"&gt;Question:&lt;/label&gt;'+
                              '&lt;div class="col-sm-5"&gt;'+
                                  '&lt;input type="text" class="form-control"  name="question'+question_number+'[]" placeholder="Enter Question"&gt;'+
                              '&lt;/div&gt;'+
                          '&lt;/div&gt;'+
                          '&lt;div class="form-group"&gt;'+
                              '&lt;label class="control-label col-sm-4" for="pwd"&gt;Answer:&lt;/label&gt;'+
                              '&lt;div class="col-sm-5"&gt;'+
                                  '&lt;input type="text" class="form-control" name="choice'+question_number+'[]" placeholder="Enter Answer"&gt;'+
                              '&lt;/div&gt;'+
                          '&lt;/div&gt;';
                      $this.closest('.form-group').next('.group').empty().append(html);
                      break;
                  case 'mcso':
                      var html =
                          '&lt;div class="form-group"&gt;'+
                              '&lt;label class="control-label col-sm-4" for="question"&gt;Question&lt;/label&gt;'+
                              '&lt;div class="col-sm-5"&gt;'+
                                  '&lt;input type="text" class="form-control"  name="question'+question_number+'[]" placeholder="Enter Question"&gt;'+
                              '&lt;/div&gt;'+
                          '&lt;/div&gt;';
                          for(var i=1; i &lt;= 3; i++){
                             html += '&lt;div class="form-group "&gt;'+
                                  '&lt;label class="control-label col-sm-4" for="choice"&gt;Choice '+ i +'&lt;/label&gt;'+
                                      '&lt;div class="col-sm-5"&gt;'+
                                          '&lt;input type="text" class="form-control"  name="choice'+question_number+'[]" placeholder="Enter Choice"&gt;'+
                                      '&lt;/div&gt;'+
                                  '&lt;label class="col-sm-1 radio-inline"&gt;&lt;input type="radio" name="mcso" value=""&gt;Correct?&lt;/label&gt;'+
                                  '&lt;a style="margin-top:6px;text-decoration: underline" class="col-sm-2 delete_choice" href="#"&gt;Delete Choice&lt;/a&gt;'+
                                  '&lt;/div&gt;';
                          }
                      html +=  '&lt;a style="text-decoration: underline" class="col-lg-offset-4 add_choice" href="#"&gt;Add Choice&lt;/a&gt;';
                      $this.closest('.form-group').next('.group').empty().append(html);
                  break;
                  case 'mcmo':
                      var html =
                          '&lt;div class="form-group"&gt;'+
                              '&lt;label class="control-label col-sm-4" for="question"&gt;Question&lt;/label&gt;'+
                              '&lt;div class="col-sm-5"&gt;'+
                                  '&lt;input type="text" class="form-control" id="question" name="question'+question_number+'[]" placeholder="Enter Question"&gt;'+
                              '&lt;/div&gt;'+
                          '&lt;/div&gt;';
                          for(var i = 1; i &lt;= 3; i++){
                              html += '&lt;div class="form-group"&gt;'+
                                      '&lt;label class="control-label col-sm-4" for="choice"&gt;Choice '+ i +'&lt;/label&gt;'+
                                          '&lt;div class="col-sm-5"&gt;'+
                                              '&lt;input type="text" class="form-control"  name="choice'+question_number+'[]" placeholder="Enter Choice"&gt;'+
                                          '&lt;/div&gt;'+
                                      '&lt;label class="col-sm-1 checkbox-inline"&gt;&lt;input type="checkbox" name="mcmo" value=""&gt;Correct?&lt;/label&gt;'+
                                      '&lt;a style="margin-top:6px;text-decoration: underline" class="col-sm-2 delete_choice" href="#"&gt;Delete Choice&lt;/a&gt;'+
                                  '&lt;/div&gt;';
                          }
                      html +=  '&lt;a style="text-decoration: underline" class="col-lg-offset-4 add_choice" href="#"&gt;Add Choice&lt;/a&gt;';
                      $this.closest('.form-group').next('.group').empty().append(html);
                  break;
              }
  
          });
  </code></pre>