title: Limit the up down movement of divs with Jquery
body: <p>I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list. </p>
  
  <p>I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?</p>
  
  <p>Thank you! </p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   
   $('.up_button').click(function(){
    $(this).parents('.task').insertBefore($(this).parents('.task').prev());
   });
  
   $('.down_button').click(function(){
    $(this).parents('.task').insertAfter($(this).parents('.task').next());
   });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="task col-sm-12"&gt;
   &lt;div class="col-md-6"&gt;
     &lt;div class="input-group"&gt;
     &lt;span class="input-group-addon"&gt;&lt;input type="checkbox" name="task1" value="taskID1" /&gt;&lt;/span&gt; &lt;input type="text" class="form-control" value="Write HTML" readonly&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-6"&gt;
    &lt;button type="button" class="btn btn-default up_button"&gt;&lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt; Move Up&lt;/button&gt;
    &lt;button type="button" class="btn btn-default down_button"&gt;&lt;span class="glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt; Move Down&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="task col-sm-12"&gt;
   &lt;div class="col-md-6"&gt;
     &lt;div class="input-group"&gt;
     &lt;span class="input-group-addon"&gt;&lt;input type="checkbox" name="task1" value="taskID1" /&gt;&lt;/span&gt; &lt;input type="text" class="form-control" value="Write XML" readonly&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-6"&gt;
    &lt;button type="button" class="btn btn-default up_button"&gt;&lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt; Move Up&lt;/button&gt;
    &lt;button type="button" class="btn btn-default down_button"&gt;&lt;span class="glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt; Move Down&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>