Javascript: changing position of elements of array using function

Hello

I would like to change position of elements of the array I created within the “shift” function below. When I fill the input boxes (document.getElementById(“input_06_07_08_09”).value) and then click “shift” button, the elements of array in the output boxes (document.getElementById(“input_10_11_12_13”).value) shift just for one time.

When I click “shift” button again and again, there is no change in the output boxes. The elements do not shift anymore.

I want input boxes not to change when I fill them and click “shift” button, and output boxes change (shift elements) every time I click the “shift” button.

Could you please give your suggestions to correct the code below? How can I use global variables to solve the problem?

Best regards,

`
<script>

function shift() {

var op06 = document.getElementById(“input_06”).value;
var op07 = document.getElementById(“input_07”).value;
var op08 = document.getElementById(“input_08”).value;
var op09 = document.getElementById(“input_09”).value;

var array = [op06, op07, op08, op09];

var i = 3;
t = array[3];
for (i = 3 ; i >= 0; i–) {
array[i] = array[i-1];
}
array[0] = t;

document.getElementById(“input_10”).value = array[0];
document.getElementById(“input_11”).value = array[1];
document.getElementById(“input_12”).value = array[2];
document.getElementById(“input_13”).value = array[3];
}

function clear ()
{
document.getElementById(“input_10”).value = “”;
document.getElementById(“input_11”).value = “”;
document.getElementById(“input_12”).value = “”;
document.getElementById(“input_13”).value = “”;
}

</script>

<div class=”container-fluid”>
<h1><center>Shift</h1>
<div class=”row”>
<div class=”col-md-4″>
<div class=”border”>
<div id=”op06″><center><input id=”input_06″ type=”text” class=”inputs” ></div>
<div id=”op07″><center><input id=”input_07″ type=”text” class=”inputs” ></div>
<div id=”op08″><center><input id=”input_08″ type=”text” class=”inputs” ></div>
<div id=”op09″><center><input id=”input_09″ type=”text” class=”inputs” ></div>
</div>
</div>
<div class=”col-md-4″>
<div class=”next-div”>
<button type=”button” class=”btn btn-success btn-block btn-md” onclick=”shift()”>Shift</button>
<button type=”button” class=”btn btn-success btn-block btn-md” onclick=”clear()”>Clear</button>
</div>
</div>
<div class=”col-md-4″>
<div class=”border”>
<div id=”op10″><center><input id=”input_10″ type=”text” class=”inputs” readonly=”true”></div>
<div id=”op11″><center><input id=”input_11″ type=”text” class=”inputs” readonly=”true”></div>
<div id=”op12″><center><input id=”input_12″ type=”text” class=”inputs” readonly=”true”></div>
<div id=”op13″><center><input id=”input_13″ type=”text” class=”inputs” readonly=”true”></div>
</div>
</div>
</div>
</div>

`

Also in #Full-stackDeveloper _↴