Как настроить только класс, связанный с обработчиком событий on (change)?

Question

Я создал три опроса, в которых, в зависимости от выбранного варианта, пользователь получает либо более подробную информацию, либо сообщение об ошибке. Мне нужно, чтобы сообщение включало только текущую форму, в которой происходит событие. Как настроить только класс, связанный с текущим событием?

(function() { 
$('.styled-select').on('change', function() { 
    var id = $('option:selected').parent().attr('id'); 
    console.log(id); 

    var $wrongAnswer = $(this).parent().filter('.wrong-answer'); 
    var $story  = $(this).parent().filter('.story'); 


    if ($.inArray($(this).val(), ['artisan', 'hipster', 'meditation', 'cardigan'])) { 
     $wrongAnswer.removeClass('expand'); 
     $story.addClass('expand'); 

    } else { 
     $wrongAnswer.addClass('expand'); 
     $story.removeClass('expand'); 
    } 

}); 
})(); 

HTML-

<section id="q-three" class="survey"> 
<form action=""> 
    <select name="" id="select-three" class="styled-select" > 
     <option default>Select one</option> 
     <option value="artisan">artisan</option> 
     <option value="humblebrag">humblebrag</option> 
     <option value="brooklyn">brooklyn</option> 
     <option value="kickstarter">kickstarter</option> 
    </select> 
    <h2>Put a bird on it kogi master cleanse try-hard salvia.</h2> 

    <div class="story"> 
     <h3>Pickled letterpress 3 wolf moon crucifix. Migas artisan thundercats, four loko keytar chicharrones shabby chic drinking vinegar knausgaard portland street art occupy small batch. </h3> 
    </div> 
    <div class="wrong-answer"> 
      <h3>Try again!</h3> 
    </div> 
</form> 

Live demo.

Answer 1

Wrap каждый вопрос с div, так $wrongAnswer и $story будет искать только в div с текущим вопросом, а не в целом виде.

<section id="q-three" class="survey"> 
<form action=""> 
    <div> 
    <select name="" id="select-three" class="styled-select" > 
     <option default>Select one</option> 
     <option value="artisan">artisan</option> 
     <option value="humblebrag">humblebrag</option> 
     <option value="brooklyn">brooklyn</option> 
     <option value="kickstarter">kickstarter</option> 
    </select> 
    <h2>Put a bird on it kogi master cleanse try-hard salvia.</h2> 

    <div class="story"> 
     <h3>Pickled letterpress 3 wolf moon crucifix. Migas artisan thundercats, four loko keytar chicharrones shabby chic drinking vinegar knausgaard portland street art occupy small batch. </h3> 
    </div> 
    <div class="wrong-answer"> 
      <h3>Try again!</h3> 
    </div> 
    </div> 
</form> 

Кроме того, в сценарии, используйте .find() вместо .filter():

var $wrongAnswer = $(this).parent().find('.wrong-answer'); 
var $story  = $(this).parent().find('.story');