Q:

Issue with quiz and jQuery

I have written simple quiz with two cards. After user have clicked on the card, attribute clicked change status and answer is checked.
clicked = false;
$(document).on("click", "#card1", function() {
 clicked = true;
 check answer........
});

I have got antoher on click event, which should load next question when user click on body element. 
This event should only work when the card is clicked and clicked status is true.
$(document).on("click", "body", function() {
            if (clicked == true) {
                quiz.nextQuestion();
                clicked = false; 
            }
        });

But these two onclick events start and execute simultaneously.
How can I prevent this?

A:

stopPropagation(); can be used for this. Otherwise click on elements inside will also trigger the body click functions. 
One more thing is that, we have to give click for <html> rather than <body>.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

clicked = false;
$(document).on("click", "#card1", function(e) {
  e.stopPropagation();
  clicked = true;
  console.log('click card');
});

$(document).on("click", "html", function(e) {
  if (clicked == true) {
    console.log('click body');
    clicked = false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="card1">
    Card1
  </div>
</body>

