Need help resetting variable I declared outside a function and iterated inside it?

basically i am trying to get the web page to navigate between fields with arrow keys. Ive got most if it down, just that the variable I has to be increased or decreased by 1 to get the index of the array of elements accessed by class, as such:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

var isFocus;
var I = 0;
const prev = document.getElementsByClassName('prev');
const curr = document.getElementsByClassName('curr');
prev[0].focus()
var isFocused1;
var isFocused2;
document.addEventListener('keydown', fX)
function fX(event) {
key = event.key
isFocused1 = document.activeElement.classList.contains("prev");
isFocused2 = document.activeElement.classList.contains("curr");
if (isFocused1 == true) {
isFocus = prev
} else if (isFocused2 == true) {
isFocus = curr
}
if (key == 'ArrowDown' && I < 5) {
I++;
isFocus[I].focus();
} else if (key == 'ArrowUp' && I > 0) {
I--;
isFocus[I].focus();
}
}

<!-- language: lang-html -->

<p> try selecting first column's top input box, click down 3 times to get to the fourth one, then click the second column's first input box. Now click down once and you'll see the cursor skip to the fifth box. </p>
<table>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
</table>

<!-- end snippet -->

https://jsfiddle.net/nw259to6/1/

The cursor will move down the fields, however upon switching to the other column input class = 'curr' , I's value keeps on iterating from whatever value it left of from. Meaning the next field to be active would be curr[I], clicking on the first input text box, then pressing down, makes the cursor skip a few input boxes.

Id like that every time i switch fields I goes back to 0 so that i can scroll from top to bottom. THX!

That's because you're using the same variable for both types of <input>s. Also, you need to reset the index when an element is focused.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

['prev', 'curr'].forEach(selector => {
// selector is either 'prev' or 'curr'
// Selects all inputs with that class
const inputs = [...document.querySelectorAll(`.${selector}`)];
let index = 0;
inputs[index].focus();
// On keydown, we move focus to another <input> if possible.
function onkeydown(event) {
const key = event.key;
if (key == 'ArrowDown' && index < 5) {
index++;
} else if (key == 'ArrowUp' && index > 0) {
index--;
}
inputs[index].focus();
}
// On focus, we find the index of the target in the original list
// which always consists of <input>s with the same class
function onfocus(event) {
index = inputs.indexOf(event.target);
}
// Iterate over the list, add event listeners for those <input>s
inputs.forEach(input => {
input.addEventListener('keydown', onkeydown);
input.addEventListener('focus', onfocus);
});
});

<!-- language: lang-html -->

<p>Try selecting first column's top input box, click down 3 times to get to the fourth one, then click the second column's first input box.</p>
<table>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
<tr>
<td><input type="text" name="" class="prev"></td>
<td><input type="text" name="" class="curr"></td>
<td>
<p class="mtr-Result"></p>
</td>
</tr>
</table>

<!-- end snippet -->

The above will not work if you were to override ArrowRight and ArrowLeft's behaviour. In such a case, you will need a 2D coordinate.

You can make the navigation agnostic - independent of row and column count in the keydown handler:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

const inputCols = document.querySelector("input#colCount");
const inputRows = document.querySelector("input#rowCount");
inputCols.addEventListener("input", buildTable);
inputRows.addEventListener("input", buildTable);
buildTable();
function buildTable() {
const html = Array.from({length: inputRows.value},
_ => 
"<tr>" +
Array.from({length: inputCols.value},
_ => "<td><input></td>"
).join("") +
"</tr>"
)
.join("");
const table = document.querySelector("table");
table.innerHTML = html;
table.querySelector("input").focus();
}
document.addEventListener("keydown", ({key}) => {
const delta = { ArrowDown: 1, ArrowUp: -1 }[key];
if (!delta) {
return; // not an arrow up/down key
}
const table = document.querySelector("table");
const focused = table.querySelector("input:focus");
if (!focused) {
table.querySelector("input").focus(); // focus the first input
return;
}
// find next input with given column count
const colCount = table.querySelectorAll("tr:first-child > td > input").length;
const inputs = [...table.querySelectorAll("td > input")];
const rowCount = inputs.length / colCount;
let idx = inputs.indexOf(focused);
const rowIdx = Math.floor(idx / colCount);
// last cell, go to first
if (idx === inputs.length - 1 && delta > 0) { 
idx = 0;
// first cell, go to last
} else if (idx === 0 && delta < 0) { 
idx = inputs.length - 1;
// last row, go to next column / first row
} else if (rowIdx === rowCount - 1 && delta > 0 && idx) { 
idx = (idx % colCount) + 1;
// first row, go to last row / prevous column
} else if (rowIdx === 0 && delta < 0 && idx) { 
idx = (idx % colCount) - 1 + (rowCount - 1) * colCount;
// go to next row
} else { 
idx += delta * colCount;
}
inputs[idx].focus();
});

<!-- language: lang-html -->

<p>
<label>Number of cols
<input id="colCount" type="number" min="2" max="4" value="2">
</label>
<label>Number of rows
<input id="rowCount" type="number" min="2" max="10" value="6">
</label>
</p>
<table>
</table>

<!-- end snippet -->