estoy intentando agregar un tr a una tabla y dentro de este hay una columna que llevaria un array de inputs, entonces cuando agrego filas a la tabla y checo con un querySelector nada mas obtengo el primer input que genero con el html original
<table id="tableData" class="table table-hover table-sm text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Material Type</th>
<th scope="col">Part Number</th>
<th scope="col">Part Number ( Descr )</th>
<th scope="col">Qty</th>
<th scope="col">Liability To: Wywinn (W)/ Customer (C )/ Other (Specify)</th>
<th scope="col">Reason for your request</th>
<th scope="col">Customer</th>
<th scope="col">PIC</th>
</tr>
</thead>
<tbody id="tableBodyData">
<tr>
<th scope="row"><input type="text" class="text-center"></th>
<td><input name="MaterialType[]" type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
<td><input type="text" class="text-center"></td>
</tr>
</tbody>
</table>
<button id="btnSend" type="button" class="btn btn-outline-secondary">Send Request</button>
Y este es el codigo de javascript
const addRow = document.querySelector("#btnSend")
addRow.addEventListener("click", (e) => {
const addRowTable = document.getElementById("tableData").insertRow(-1).innerHTML = "<tr><th scope="row"><input type="text" class="text-center"></th><td><input name="MaterialType[]" type="text" class="text-center"></td><td><input type="text" class="text-center"></td></tr>"
})
Entonces cuando intento obtener todos los inputs del mismo name solo obtengo el primero que se creo con el HTML
const inputs = document.querySelectorAll("input[name='MaterialType[]']")