title: Jquery validation issue on dynamically added input
body: <p>I have created a form and added add more fields using jquery. That is working, the issue is, I have added validation using jquery validation plugin. Validation is working only for first field only. How Can I solve this problem.
  I have attached the code.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      var maxField = 10; 
      var addButton = $('.add_button'); 
      var wrapper = $('.field_wrapper'); 
      var fieldHTML = '&lt;div class="add_more"&gt;&lt;input type="text" name="fname[]" /&gt;&lt;a href="javascript:void(0);" class="remove_button" title="Remove field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'; 
      var x = 1; 
      $(addButton).click(function(){ 
          if(x &lt; maxField){ 
              x++; 
              $(wrapper).append(fieldHTML); 
          }
      });
      $(wrapper).on('click', '.remove_button', function(e){ 
          e.preventDefault();
          $(this).parent('.add_more').remove(); 
          x--; 
      });
  
          $("#popup").validate({
              rules: {
                  "fname[]":"required"
              },
              messages:{
                  "fname[]":"First Name required"
              }
          });
  
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  input[type="text"]{height:20px; vertical-align:top;}
  .field_wrapper div{ margin-bottom:10px;}
  .add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
  .remove_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form  action="" method="post" id="popup"&gt;
  &lt;div class="field_wrapper"&gt;
      &lt;div class="add_more"&gt;
          &lt;input type="text" name="fname[]" /&gt;&lt;br&gt;&lt;input type="text" name="fname[]" /&gt;
          &lt;a href="javascript:void(0);" class="add_button" title="Add field"&gt;Add More&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="submit" name="submit" value="SUBMIT"/&gt;
  &lt;/form&gt;
  </code></pre>