title: add a ul dynamically after all the input elements in a div
body: <p>I need to add a ul after all the input elements of a div using jquery. 
  This is typically validating a phone number. So if any of the above phone text box validation fails, all the phone text boxes needs to be highlighted in red and then I need to display the error message after all the inputs. The error message I am dynamically adding using jquery.</p>
  
  <pre><code>&lt;div class="class1"&gt;
     &lt;input class="class2" type="text" id="id1" name="id1" maxlength="3" title="Please enter value"/&gt;
     &lt;span class="class3"&gt;-&lt;/span&gt;
     &lt;input class="class2" type="text" id="id2" name="id2" title="Please enter value"/&gt;
     &lt;span class="class3"&gt;-&lt;/span&gt;
     &lt;input class="class2 " type="text" id="id3" name="id3" title="Please enter value"/&gt;
     &lt;span class="class3"&gt;Ext.&lt;/span&gt;
     &lt;input class="class2" type="text" id="id4" name="id4" /&gt;
     &lt;input type="hidden" id="hidden_id" /&gt;
    &lt;!--Need to add ul element here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS function</p>
  
  <pre><code>$(function() {
  
  function validate(){
  var returnVal = true;
  var input = $('#id1');
  input.nextAll("ul.error").remove();
  input.removeClass('wrong');
  input.removeClass('correct');
  if(input.val() == 0)
  {    
      input.addClass('wrong');
      var title = input.attr('title');
      $('&lt;ul class="error"&gt;&lt;li&gt;'+title+'&lt;/li&gt;&lt;/ul&gt;').insertAfter(input.nextAll("input"));
      return false;
  }
  else{
      input.addClass('correct');
      returnVal = true;
  }
  return returnVal;
  }
  
  ('#subBtn').click(function(){
     var retVal = validate();
     });
  
  $('#id1').blur(validate);
  
  });
  </code></pre>
  
  <p>If I am using the below code for inserting the error, the error is displayed after all the input text boxes. </p>
  
  <pre><code>$('&lt;ul class="error"&gt;&lt;li&gt;'+title+'&lt;/li&gt;&lt;/ul&gt;').insertAfter(input.nextAll("input"));
  </code></pre>
  
  <p>I need to display only one error message which needs to be displayed after the last input and also if the input is correct i need to remove the "wrong" class and add "correct" class
  How can I do that?
  Can somebody help me?</p>
  
  <p>Thanks</p>