Как использовать проверку jQuery на нескольких копиях одной и той же формы на одной странице

Question

Цель этой формы - дать пользователю возможность отвечать на вопросы, которые задают люди. У пользователя будет несколько вопросов с полями ответа ниже. Я хочу использовать плагин проверки jQuery для проверки того, что они вводят текст в поле ответа и принимают условия.

Мое текущее решение успешно проверяет первую форму (отвечая на вопрос № 1), но последующие вопросы с формами ответов, похоже, не имеют к ним применений jQuery.

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

Fiddle

HTML

<div class="form"> 
    <p>Question #1 text</p> 
    <form id="question_response" class="question_response"> 
     <input type="text" name="response_1"></input> 
     <input type="submit"> 
    </form> 
</div> 
<div class="form"> 
    <p>Question #2 text</p> 
    <form id="question_response"> 
     <input type="text" name="response_2"></input> 
     <input type="submit"> 
    </form> 
</div> 
<div class="form"> 
    <p>Question #3 text</p> 
    <form id="question_response"> 
     <input type="text" name="response_3"></input> 
     <input type="submit"> 
    </form> 
</div> 

JS

$(function() { 
    $(".question_response").validate({ 
     rules: { 
      "response_1": { 
       required: true 
      }, 
      "response_2": { 
       required: true 
      }, 
      "response_3": { 
       required: true 
      } 
     }, 
     messages: { 
      "response": { 
       required: 'This field is required' 
      } 
     }, 
     errorPlacement: function (error, element) { 
      error.insertAfter(element.parent()); 
     } 
    }); 
}); 

Answer 1

Использование Try класса и установить уникальный идентификатор для каждого элемента <input>

<form class="question_response"> 
     <input type="text" name="response"></input> 
     <input type="submit"> 
</form> 

$(".question_response").validate({