mover dois elementos ao mesmo tempo

Olá pessoal. O Código abaixo está funcionando e move um elemento por vez com ajuda da seta. Até aqui tudo ok. Quero mover dois elementos por vez e para isso adicionei o elemento input no código e quero muito que funcione da seguinte forma:

ao mover menuA para 2º posição, inputA também tem que ir para 2º posição ou

ao mover menuA para 3º posição, inputA também tem que ir para 3º posição ou

-----------

ao mover menuB para 1º posição, inputB também tem que ir para 1º posição ou

ao mover menuB para 3º posição, inputB também tem que ir para 3º posição ou

-----------

ao mover menuC para 1º posição, inputC também tem que ir para 1º posição ou

ao mover menuC para 2º posição, inputC também tem que ir para 2º posição

Nota: o campo input não é pra ser clicado por este motivo deixei disabled.

<style>
*{ margin: 0; padding: 0; }
.divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;}

.divPaiCor{ flex:1; margin-right: 10px; }
.h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; }

.divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;}
.b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default; }

.divPaiSeta b:hover {

 background: #000;
 color: #fff;
 cursor: pointer;
}

.divPaiSeta b:active {

 background: gray;
 color: #000;
 user-select: none;
}

.divPaiCor h1:hover{

 background: #000;
 color: #fff;
 cursor: pointer;
}

.selectedItem {
 background: #000;
 color: #fff;
}

</style>

<div class="divPrincipal">

<div class="divPaiCor">

<h1 class="h1_1">menuA </h1>
<h1 class="h1_1">menuB </h1>
<h1 class="h1_1">menuC </h1>
<hr>
<input type="text" class="inputA" disabled value="inputA">
<input type="text" class="inputB" disabled value="inputB">
<input type="text" class="inputC" disabled value="inputC">
</div>

<div class="divPaiSeta">
<b id="id1" class="b_1">⇧ </b>
<b id="id2" class="b_1">⇩ </b>
</div>

</div>

<script>

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 = 2;

 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);

</script>