let indexSelected;

let elementSelected;

let divPaiCor   = document.querySelector(".divPaiCor");

let arrowUp     = document.querySelector("#id1");

let arrowDown    = document.querySelector("#id2");

​

function setaPraCima(){

  let x = document.querySelectorAll(".h1_1");

  indexSelected = returnPositionIndex(indexSelected - 1);

  divPaiCor.insertBefore(elementSelected, x[indexSelected]);

}

​

function setaPraBaixo(){

  let y = document.querySelectorAll(".h1_1");

  indexSelected = returnPositionIndex(indexSelected + 1);

  divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);

}

​

function returnPositionIndex(index) {

  let min = 0, max = 4;

  if(index <= min){ return min; }

  if(index >= max){ return max; }

  if(index > min || index < max){ return index; }

}

function selectItem(refItem) {

  let allElements = [...refItem.target.parentNode.children];

  let index = allElements.indexOf(refItem.target);

  allElements.map(item => item.classList.remove("selectedItem"));

  refItem.target.classList.add("selectedItem");

  indexSelected = index;

  elementSelected = refItem.target;

}

​

divPaiCor.addEventListener("click", selectItem);

arrowUp.addEventListener("click", setaPraCima);

arrowDown.addEventListener("click", setaPraBaixo);