title: Add a form after ul
body: <p>How i can add form after ul? Here is my code:</p>
  
  <pre><code>&lt;article&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae possimus dolore perferendis vel magni odio in architecto corrupti consequuntur.
  
      &lt;a class="open" href="#"&gt;Add comment&lt;/a&gt;
  &lt;/article&gt;
  &lt;ul class="children"&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;hr&gt;
  
  &lt;article&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae possimus dolore perferendis vel magni odio in architecto corrupti consequuntur.
  
      &lt;a class="open" href="#"&gt;Add comment&lt;/a&gt;
  &lt;/article&gt;
  &lt;ul class="children"&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and jquery:</p>
  
  <pre><code>$('.open').on('click', function(event) {
      event.preventDefault();
  
      $(this).parent().after('&lt;form&gt;&lt;input type="text"&gt;&lt;/form&gt;');
  });
  </code></pre>
  
  <p>question is: how i can add form after ul list, currently is inserted after article.</p>
  
  <p>Here is demo: <a href="http://jsfiddle.net/9q1aao0e/5/" rel="nofollow">DEMO</a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>How add form after article if ul after article not exist?</p>
  
  <p><strong>ANSWER:</strong></p>
  
  <pre><code>$('.quick_reply').on('click', function(event) {
      event.preventDefault();
  
      if ($(this).parent().next('ul').length &gt; 0) {
          $(this).parent().next('ul').after('&lt;form&gt;&lt;input type="text"&gt;&lt;/form&gt;');
      } else {
          $(this).parent().after('&lt;form&gt;&lt;input type="text"&gt;&lt;/form&gt;');
      }
  
  });
  </code></pre>