title: Move containing elements up and down with jquery
body: <p>Thanks for any help you can provide! Currently, I use a ui-sortable code to allow users to move items up and down in order. Now, I want to give each of these items a set of "up" and "down" buttons that allow users to move items up and down with a click. I've tried reworking theses posts, but I seem to be missing something obvious...</p>
  
  <p><a href="https://stackoverflow.com/questions/2951941/jquery-sortable-move-up-down-button">jQuery Sortable Move UP/DOWN Button</a>
  <a href="https://stackoverflow.com/questions/4260373/move-up-down-in-jquery">move up/down in jquery</a></p>
  
  <p>I think somehow I'm not applying the jquery to the right element. My jsfiddle is here: <a href="http://jsfiddle.net/kevindp78/vexw5/2/" rel="nofollow noreferrer">http://jsfiddle.net/kevindp78/vexw5/2/</a> and code is below.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="box" class="ui-sortable" style="display: block;"&gt; 
  &lt;div class="leg"&gt;
      &lt;a class="image"&gt;IMG1&lt;/a&gt;
      &lt;div class="details"&gt;
          &lt;h3&gt;&lt;a href="/details"&gt;Info&lt;/a&gt;&lt;/h3&gt;
          &lt;span class="moreinfo"&gt;MoreInfo&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="up-down"&gt;
          &lt;p&gt;Change Order&lt;/p&gt;
          &lt;div class="up"&gt;
              &lt;input type="button" value="Up" class="up-button"/&gt;
          &lt;/div&gt;
          &lt;div class="down"&gt;
              &lt;input type="button" value="down" class="down-button"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="morestuff"&gt;
          Stuff1
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="leg"&gt;
      &lt;a class="image"&gt;IMG2&lt;/a&gt;
      &lt;div class="details"&gt;
          &lt;h3&gt;&lt;a href="/details"&gt;Info&lt;/a&gt;&lt;/h3&gt;
          &lt;span class="moreinfo"&gt;MoreInfo&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="up-down"&gt;
          &lt;p&gt;Change Order&lt;/p&gt;
          &lt;div class="up"&gt;
              &lt;input type="button" value="Up" class="up-button"/&gt;
          &lt;/div&gt;
          &lt;div class="down"&gt;
              &lt;input type="button" value="down" class="down-button"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="morestuff"&gt;
          Stuff2
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="leg"&gt;
      &lt;a class="image"&gt;IMG3&lt;/a&gt;
      &lt;div class="details"&gt;
          &lt;h3&gt;&lt;a href="/details"&gt;Info&lt;/a&gt;&lt;/h3&gt;
          &lt;span class="moreinfo"&gt;MoreInfo&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="up-down"&gt;
          &lt;p&gt;Change Order&lt;/p&gt;
          &lt;div class="up"&gt;
              &lt;input type="button" value="Up" class="up-button"/&gt;
          &lt;/div&gt;
          &lt;div class="down"&gt;
              &lt;input type="button" value="down" class="down-button"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="morestuff"&gt;
          Stuff3
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS</p>
  
  <pre><code>$('up-button').click(function(){
  $(this).parent('.leg').insertBefore.previous('.leg')
  });
  
  $('.down-button').click(function(){
  $(this).parent('.leg').insertAfter.next('.leg')
  });
  </code></pre>