title: Move array objects/elements Up and Down by index
body: <p>I have an list of values with up and down button. If i want to click up button the element with move upwards with previous value in list and i click down button they moves downwards to next item in list. my sample code is here, </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt; 1 &amp;nbsp;&amp;nbsp;&lt;button class="up"&gt;UP&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;button class="down"&gt;DOWN&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt; 2 &amp;nbsp;&amp;nbsp;&lt;button class="up"&gt;UP&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;button class="down"&gt;DOWN&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt; 3 &amp;nbsp;&amp;nbsp;&lt;button class="up"&gt;UP&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;button class="down"&gt;DOWN&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt; 4 &amp;nbsp;&amp;nbsp;&lt;button class="up"&gt;UP&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;button class="down"&gt;DOWN&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt; 5 &amp;nbsp;&amp;nbsp;&lt;button class="up"&gt;UP&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;button class="down"&gt;DOWN&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
  function moveUp(element) {
    if(element.previousElementSibling)
      element.parentNode.insertBefore(element, element.previousElementSibling);
  }
  function moveDown(element) {
    if(element.nextElementSibling)
      element.parentNode.insertBefore(element.nextElementSibling, element);
  }
  document.querySelector('ul').addEventListener('click', function(e) {
    if(e.target.className === 'down') moveDown(e.target.parentNode);
    else if(e.target.className === 'up') moveUp(e.target.parentNode);
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>This is the code with list of values to display, but i want array values to display in this format which performs up and down function based on index. 
  my array element is:</p>
  
  <pre><code>[
      { id: "Racer-101", rank: "1"},
      { id: "Racer-102", rank: "2"},
      { id: "Racer-103", rank: "3"},
      { id: "Racer-104", rank: "4"},
      { id: "Racer-105", rank: "5"},
      { id: "Racer-106", rank: "6"},
      { id: "Racer-107", rank: "7"},
      { id: "Racer-108", rank: "8"},
      { id: "Racer-109", rank: "9"}
  ]
  </code></pre>
  
  <p>how is it possible with array values..</p>