title: create next and previous button to show single element in javascript(laravel quiz app)
body: <p>I am trying to build a quiz application. Almost done, now I want to show my all of question to show to the user only one question and when user click next button then, next question will appear and answered question will hide.If user did not choice any answer of two, then user not be allowed to clicked next button. In the last, submit button will be appeared and user will be able to submit the data.I searched to get some source, And find almost similar what I expected. But, it is fully javascript, Now I am trying to reuse with my laravel project. But here I am facing some problem with it, Would someone help me to get expected result please-(if you have also any easy process to get expected result please let me know)
  My index.blade.php is -</p>
  
  <pre><code>&lt;div class="question" id="question-div"&gt;
       &lt;form action="{{ url('en-question-answer') }}" method="POST" id="question-form"&gt;
                                       {{ csrf_field() }}
                          &lt;?php 
                            $count=0;
                           ;?&gt;
                    @foreach($equestions as $equestionType)                 
                        @foreach($equestionType as $key =&gt; $equestion)
  
                            &lt;p&gt;{{ $equestion-&gt;question }}&lt;/p&gt;
                            &lt;input type="hidden" id="question_id[{{$count}}]" name="question_id[{{$count}}]" value="{{ $equestion-&gt;id }}"&gt;
                            &lt;label class="radio-inline"&gt;
                               &lt;input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion-&gt;choice_a }}"&gt;{{ $equestion-&gt;option1 }}
                            &lt;/label&gt;
                            &lt;label class="radio-inline"&gt;
                               &lt;input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion-&gt;choice_b}}"&gt;{{ $equestion-&gt;option2 }}
                            &lt;/label&gt;
                             &lt;hr&gt;
                         &lt;?php $count++; ?&gt;
  
                      @endforeach
                  @endforeach
  
              &lt;button type="submit" id="submit" class="btn btn-primary btn-sm pull-right"&gt;Submit&lt;/button&gt;
              &lt;div class='button' id='next'&gt;&lt;a href='#'&gt;Next&lt;/a&gt;&lt;/div&gt;
              &lt;div class='button' id='prev'&gt;&lt;a href='#'&gt;Prev&lt;/a&gt;&lt;/div&gt;
         &lt;/form&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>script is -</p>
  
  <pre><code>&lt;script&gt;
          //scripts for next-prev button
          (function() {
            var questions = document.getElementById('question_id[{{$count}}]');
            //console.log(questions);
            var questionCounter = 0; //Tracks question number
            var quiz = $('#question-div'); //Quiz div object
  
            // Display initial question
            displayNext();
  
            // Click handler for the 'next' button
            $('#next').on('click', function (e) {
              e.preventDefault();
  
              // Suspend click listener during fade animation
              if(quiz.is(':animated')) {        
                return false;
              }
              choose();
                questionCounter++;
                displayNext();
            });
  
            // Click handler for the 'prev' button
            $('#prev').on('click', function (e) {
              e.preventDefault();
  
              if(quiz.is(':animated')) {
                return false;
              }
              choose();
              questionCounter--;
              displayNext();
            });
  
            // Click handler for the 'Start Over' button
            $('#submit').on('click', function (e) {
              e.preventDefault();
  
              if(quiz.is(':animated')) {
                return false;
              }
              questionCounter = 0;
              displayNext();
              $('#submit').hide();
            });
  
            // Animates buttons on hover
            $('.button').on('mouseenter', function () {
              $(this).addClass('active');
            });
            $('.button').on('mouseleave', function () {
              $(this).removeClass('active');
            });
  
  
            // Displays next requested element
            function displayNext() {
              quiz.fadeOut(function() {
                $('question_id[{{$count}}]').remove();
  
                if(questionCounter &lt; questions.length){
                  var nextQuestion = createQuestionElement(questionCounter);
                  quiz.append(nextQuestion).fadeIn();
  
                  // Controls display of 'prev' button
                  if(questionCounter === 1){
                    $('#prev').show();
                  } else if(questionCounter === 0){
  
                    $('#prev').hide();
                    $('#next').show();
                  }
                }else {
                  $('#next').hide();
                  $('#prev').hide();
                  $('#submit').show();
                }
              });
            }
  
          })();
  &lt;/script&gt;
  </code></pre>