JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li ><input type="text" id="mytextbox"></li>
<li><input type="text" id="mytextbox"></li>
</ul>
<!-- <input type="text" class="mytextbox" >
<input type="text" class="mytextbox">
 -->
<!-- <input type="text" class="mytextbox">
<input type="text" class="mytextbox">
<input type="text" class="mytextbox">
 -->


<input id="nextBtn" type="button" class="mybutton" value="focus next">
<input id="prevBtn" type="button" class="mybutton" value="focus prev">

JavaScript

$(function(){
  //focus first input fields
  $("#mytextbox:first").focus();
  var currentFocusedInput = $("#mytextbox:first");
  // next button
  $("#nextBtn").click(function(){
     var nextInputToFocus = currentFocusedInput.next('#mytextbox');
     if($(nextInputToFocus).length > 0)
      {
        currentFocusedInput = $(nextInputToFocus);
      }
      $(currentFocusedInput).focus();
  });

  // previous button
  $("#prevBtn").click(function(){
     var prevInputToFocus = currentFocusedInput.prev('.mytextbox');
     if($(prevInputToFocus).length > 0)
      {
        currentFocusedInput = $(prevInputToFocus);
      }
      $(currentFocusedInput).focus();
  });
});