Habiendo obtenido todos los elementos con querySelectorAll()
puedes crear un arreglo y obtener el índice fácilmente con findIndex().
Por otra parte, no es recomendable incluir eventos dentro de la misma etiqueta, porque puede complicar la lógica y el mantenimiento de tus scripts; es mejor obtener los elementos y asignar evento desde Javascript, separando vista y lógica, siempre sabrás donde buscar para modificar.
Con addEventListener
, por defecto, el parámetro enviado es el evento y puedes obtener el elemento que lo disparó con variableEvento.target
.
// Obtener todos los inputs una sola vez
const inputs = document.querySelectorAll("input[name='id[]']");
// La variable e recibe evento y no elemento
const app = (e) => {
const value = e.target.value;
const split = value.split('\t')
// Crear arreglo de inputs para encontrar índice del elemento que disparó el evento
let index = Array.from(inputs).findIndex(item => item == e.target);
// Ya puedes usar index para lo que necesites
console.log(index);
// Aunque puedes acceder al elemento directamente con e.target
console.log(e.target.value);
/*
* No entiendo lo que quieres hacer aquí, por eso lo dejo comentado
for ( let i = 0; i < inputs.length; i++ ) {
inputs[i].value = split[i]
}
*/
}
// Asignar evento a inputs
inputs.forEach(input => input.addEventListener('change', app));
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center">
En resumen, creo que no necesitas el índice, a menos que haya algo más en tu proyecto que no nos hayas contado, pero casi siempre hay alternativas.
data-*
name="id[0]"
,name="id[1]"
,name="id[2]"
,...?