JSFiddle - React, Tailwind, and code Playground

by ashhaq12345

HTML

<div>
  <input class="move" type="text">
</div>
<div>
  <input class="move" type="text">
</div>
<div>
  <input class="move" type="text">
</div>

CSS

div {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
}

input {
  background-color: lightblue;
}

JavaScript

const myInput = document.querySelectorAll(".move");

myInput.forEach((el) => {
    el.addEventListener("keyup", function (event) {
        if (event.keyCode == 37) {
        console.log(event.keyCode);
            if (this.parentElement.previousElementSibling != undefined) {
                this.parentElement.previousElementSibling.getElementsByClassName("move")[0].focus();
            }
        }
        else if (event.keyCode == 39) {
            if (this.parentElement.nextElementSibling != undefined) {
                 this.parentElement.nextElementSibling.getElementsByClassName("move")[0].focus();
            }
        }
    }, false)
})