title: Swap div's position at certain index
body: <p>I am trying to swap a div's position from top on and when I click another div then top div can be swap.</p>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;div class="wrap top"&gt;
      &lt;input type="text" value="div1" class="textbox " /&gt;
  &lt;/div&gt;
  
  &lt;div class="wrap"&gt;
      &lt;input type="text" value="div2" class="textbox " /&gt;
  &lt;/div&gt;
  &lt;div class="wrap"&gt;
      &lt;input type="text" value="div3" class="textbox " /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var objectDivs = $('.wrap');
  objectDivs.on('click', function() {
      var $this = $(this);
      objectDivs.eq(0).html($this);
      $this.remove();
  })
  </code></pre>
  
  <p>The fact is I don't want to remove the div which I click instead want to swap the positions around. </p>
  
  <p>How Can I do this using jQuery itself?</p>