Script with querySelector works only once for class

April 7, 2022

The script below works fine for the first div with the .inp class, it doesn’t work for the second block with the same class. I broke my head trying to figure out why this is happening and how to make it work, while NOT ADDING new classes or IDs to the second div.

document.querySelector("input").focus();

document.querySelector(".inp").addEventListener("input", function({ target, data }){
  // Exclude non-numeric characters (if a value has been entered)
  data && ( target.value = data.replace(/[^0-9]/g,'') );
  
  const hasValue = target.value !== "";
  const hasSibling = target.nextElementSibling;
  const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";

  if ( hasValue && hasSiblingInput ){

    target.nextElementSibling.focus();
  
  } 
});

.inp input {
  display: inline-block;
  width: 10px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inp">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

<div class="inp">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

>Solution :

Here you go:

document.querySelector("input").focus();

document.querySelectorAll(".inp").forEach(inp => {
  inp.addEventListener("input", function({ target, data }){
  // Exclude non-numeric characters (if a value has been entered)
  data && ( target.value = data.replace(/[^0-9]/g,'') );
  
  const hasValue = target.value !== "";
  const hasSibling = target.nextElementSibling;
  const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";

  if ( hasValue && hasSiblingInput ){

    target.nextElementSibling.focus();
  
  } 
 });
})

.inp input {
  display: inline-block;
  width: 10px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inp">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

<div class="inp">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

As Pointy mentioned querySelector() method can only be used to access a single element while querySelectorAll() method can be used to access all elements which match with a specified CSS selector.