Arrow functionality

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>

JavaScript

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

  }

}