title: jQuery Validation with Multiple Error Placement
body: <p>I have the following form inputs. </p>
  
  <pre><code>&lt;div class="input-group"&gt;
       &lt;input type="text" id="FirstName" name="FirstName"&gt;
       &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-5"&gt;
         &lt;div class="form-group"&gt;
           &lt;input type="text" id="LastName" name="LastName"&gt;
         &lt;/div&gt;
  &lt;/div&gt;
  &lt;div &gt;
      &lt;ul class="list-unstyled" id="LastNameErrors"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>1) I want to place the error message for the <code>FirstName</code> below the input-group .</p>
  
  <p>2) I want to place the error message for the <code>LastName</code> inside a <code>ul</code> which has an id of <code>#LastNameErrors</code></p>
  
  <p>I can achieve the firstname placement by doing the following but whats the jquery to achieve the error placement for the last name as per requirement above?</p>
  
  <p>The following keeps appending to the <code>ul</code> and doesnt remove the error when the field is valid.</p>
  
  <pre><code>$("form").validate({
          errorPlacement: function (error, element) {
              var placement = element.closest('.input-group');
              var firstNameError = true;
  
              if (!placement.get(0)) {
                  firstNameError = false;
                  placement = $("#LastNameErrors");
              }
              if (error.text() !== '') {
  
                  if (firstNameError)
                      placement.after(error);
                  else
                      placement.append('&lt;li &gt;&lt;label&gt;' + error.text() + '&lt;/li&gt;');
              }
          }
  
    });
  </code></pre>