title: Append to the second to last li
body: <p>Ok so I have this <code>HTML</code> structure and I need to keep appending a new <code>li</code> after test3 and so on...right before the form <code>li</code>. I know how to do the append logic in <code>jquery</code> but how do I isolate and make sure I can keep doing it....maybe use the live function. </p>
  
  <pre><code>&lt;td class="resources_present"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://test.com"&gt;http://test.com&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://test2.com"&gt;http://test2.com&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tes3.com"&gt;http://test3.com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;form method="post" id="new_resource" class="new_resource" action="/resources" accept-charset="UTF-8"&gt;&lt;div style="margin: 0pt; padding: 0pt; display: inline;"&gt;&lt;input type="hidden" value="✓" name="utf8"&gt;&lt;input type="hidden" value="BEeMlTtPiMi8mv/whQ2z757CTTOnNl0oiPpN3WdqSBg=" name="authenticity_token"&gt;&lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;input type="text" size="30" name="resource[url]" id="resource_url"&gt;
      &lt;input type="hidden" value="5" name="resource[course_id]" id="resource_course_id"&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;input type="submit" value="Create" name="commit" id="resource_submit" style="display: inline;"&gt;
          &lt;img class="noShow" src="/images/spinner.gif" style="display: none;"&gt;
    &lt;/div&gt;
  &lt;/form&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Basically I need to find the selector to add this:</p>
  
  <pre><code>    &lt;li&gt;&lt;a href="http://test4.com"&gt;http://test4.com&lt;/a&gt;&lt;/li&gt; // after the 
  
              &lt;li&gt;&lt;a href="http://test3.com"&gt;http://test3.com&lt;/a&gt;&lt;/li&gt; // and continue to do that with 5, 6 , 7, and so on
  </code></pre>