title: JS / jQuery Reorder data attribute for elements on click
body: <p>I have a set of elements like the following:</p>
  
  <pre><code>&lt;div&gt;    
    &lt;div data-pos="1"&gt;Elem 1&lt;/div&gt;
    &lt;div data-pos="2"&gt;Elem 2&lt;/div&gt;
    &lt;div data-pos="3"&gt;Elem 3&lt;/div&gt;
    &lt;div data-pos="4"&gt;Elem 4&lt;/div&gt;
    &lt;div data-pos="5"&gt;Elem 5&lt;/div&gt;
    &lt;div data-pos="6"&gt;Elem 6&lt;/div&gt;
    &lt;div data-pos="7"&gt;Elem 7&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Upon clicking one the elements (e.g. Elem 4 in the example below) I want the data-pos attributes to be reordered like the following:</p>
  
  <pre><code>&lt;div&gt;    
    &lt;div data-pos="5"&gt;Elem 1&lt;/div&gt;
    &lt;div data-pos="6"&gt;Elem 2&lt;/div&gt;
    &lt;div data-pos="7"&gt;Elem 3&lt;/div&gt;
    &lt;div data-pos="1"&gt;Elem 4&lt;/div&gt;
    &lt;div data-pos="2"&gt;Elem 5&lt;/div&gt;
    &lt;div data-pos="3"&gt;Elem 6&lt;/div&gt;
    &lt;div data-pos="4"&gt;Elem 7&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm sure there is a really simple way of doing this but I'm just not seeing it. I just deleted my code as it wasn't anywhere near to working, so have nothing to show you I'm afraid.</p>