Jquery click method only works once in my Quiz

Question

I'm making a simple quiz (in a style of one question at a time), this is the JS code:

$(document).ready(function(){   
    var item1 = document.getElementById('questionarea');
    var item2 = document.getElementById('answers');  
    var totalQuestions = $('.questionarea').size();
    var currentQuestion = 0;

    $questions = $('.questionarea');
    $questions.hide();

    $(".btn-lg").click(function(){
        $(this).hide();
        $(".progress").show();
        $(".answers").show();
        $($questions.get(currentQuestion)).fadeIn();
    });

    $('.answers').click(function() {
        $($questions.get(currentQuestion)).fadeOut(function () {
            currentQuestion += 1;
            $($questions.get(currentQuestion)).fadeIn();
        });
    });
});

And it works but only once! for the first question/answers. When I click on any of the button answers from the second question, nothing happens! It doesn't fade out and the third question never appears. What's the matter? Thanks in advance!

HTML:

<div class="col-lg-6 text-center">
    <button type="button" class="btn btn-primary btn-lg text-center" id="start">Start quiz</button></div>

<!-- QUIZ AREA -->

<!-- QUESTION & ANSWERS 1 -->   
  <div class="questionarea QA1 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> At work </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Living together</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Under unusual circumstances</label></div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> In school</label></div></div>
  </div>  

<!-- QUESTION & ANSWERS 2 -->  
  <div class="questionarea QA2 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q2: How would you describe your friendship?</p>
       </ul> 
<br>
    <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Needy </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Amazing</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Deep</label></div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Family</label></div></div>

</div>

<!-- QUESTION & ANSWERS 3 -->  
  <div class="questionarea QA3 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q3: What do you do together?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Business </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Go out</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Just hold each other</label>         </div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>  

    </div>

 <!-- QUESTION & ANSWERS 4 -->        
   <div class="questionarea QA4 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q4: How often do you fight?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Not much, but when we do, it's a big deal </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> We have lots of harmless tiffs</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Sometimes</label>         </div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>    

  </div> 
<!-- ---- -->   

</div>   
</body>

Answer 1

I created a JSFiddle with your code: https://jsfiddle.net/xr9d5rg1/ (if you can do it yourself the next time, would be very helpful :D )

There was something funky going on, I updated a couple things on the code:

1 - Updated .size() to .length , as it's been updated in the last jQuery version (ignore it if you're use a older jQuery version)

2 - Updated the click reference, from $('.answers') to $('.answers input') , so it doesn't accept clicks outside of radio boxes;

3 - Updated the reference to the question, such as the user 1252748 suggested;

It seems to be working properly now; Maybe there was some weird event trigger going on, that called the increment twice;