title: Nested dynamically generated forms using jQuery
body: <p>I am creating a survey generator. I want to be able to add multiple choice answers to dynamically generated forms. As seen in the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/4XgO2.jpg" alt="enter image description here"></p>
  
  <p>Currently, adding questions and removing them works perfectly. The problem is that adding and removing answers only works for the first question.</p>
  
  <p>Here is my html partial and scripts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@extends('app')
  
  @section('content')
      {!! Form::model($survey = new \App\Survey, ['url' =&gt; 'surveys']) !!}
      &lt;h1 style="text-align:center"&gt;Create a new Survey&lt;/h1&gt;
  
          &lt;div class="form-group"&gt;
              {!! Form::label('title', 'Title:') !!}
              {!! Form::text('title', null, ['class' =&gt; 'form-control']) !!}
          &lt;/div&gt;
  
      &lt;hr/&gt;
  
      &lt;div id="input_fields_wrap"&gt;
          &lt;div class="form-group"&gt;
              {!! Form::label('question', 'Question:') !!}
              &lt;div class="input-group"&gt;
                  {!! Form::text('questions[]', null, ['class' =&gt; 'form-control']) !!}
                  &lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default btn-info add_answer_button" type="button"&gt;Add Answer&lt;/button&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="input_answers_fields_wrap" style="margin-left:40px;"&gt;
              {{--Dynamically added answer boxes--}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="add_question_button" class="btn btn-primary" style="margin-bottom:15px" type="text"&gt;Add another Question&lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          {!! Form::submit('Add Survey', ['class' =&gt; 'btn btn-primary form-control']) !!}
      &lt;/div&gt;
      {!! Form::close() !!}
  
  @endsection
  
  @section('footer')
  
      &lt;script&gt;
          // Jquery for adding a question
          $(document).ready(function() {
              var max_fields      = 10; //maximum input boxes allowed
              var wrapper         = $("#input_fields_wrap"); //Fields wrapper
              var add_button      = $("#add_question_button"); //Add button ID
  
              var x = 1; //initial text box count
              // Add a question
              $(add_button).click(function(e){ //on add input button click
                  e.preventDefault();
                  if(x &lt; max_fields){ //max input box allowed
                      x++; //text box increment
                      $(wrapper).append('&lt;div class="form-group"&gt;&lt;div class="input-group" style="margin-bottom: 15px;"&gt;{!! Form::text('questions[]', null, ['class' =&gt; 'form-control']) !!}&lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default btn-info add_answer_button" type="button"&gt;Add Answer&lt;/button&gt;&lt;button class="btn btn-default btn-danger remove_field" type="button"&gt;Remove&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="input_answers_fields_wrap" style="margin-left:40px;"&gt; &lt;/div&gt;');
                  }
              });
  
              $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                  e.preventDefault(); $(this).parent().parent('div').remove();
                  x--;
              })
          });
  
          // Jquery for adding an answer to a question
          $(document).ready(function() {
              var max_fields      = 4; //maximum input boxes allowed
              var wrapper         = $(".input_answers_fields_wrap"); //Fields wrapper
              var add_button      = $(".add_answer_button"); //Add button ID
  
              var x = 1; //initial text box count
              // Add an answer
              $(add_button).click(function(e){ //on add input button click
                  e.preventDefault();
                  if(x &lt; max_fields){ //max input box allowed
                      x++; //text box increment
                      $(wrapper).append('&lt;div class="input-group" style="margin-bottom: 15px;"&gt;{!! Form::text('answers[]', null, ['class' =&gt; 'form-control']) !!}&lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default remove_field" type="button"&gt;Remove&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;');
                  }
              });
  
              // Remove a field
              $(wrapper).on("click",".remove_field", function(e){
                  e.preventDefault(); $(this).parent().parent('div').remove();
                  x--;
              })
          });
      &lt;/script&gt;
  
  @endsection</code></pre>
  </div>
  </div>
  </p>