У вас в list храниться сейчас элемент tr из thead (помимо необходимых). На первой итерации вашего цикла вы проходите по немуи в list[i].getElementsByTagName("input") получаете undefined, т.к. там нет тегов input. При обращении undefined.value вы, соответственно, получаете ошибку. Измените селектор на более подробный, чтобы не захватывать tr из thead.
Ну и у вас будет куча строк с id rowElement. Видимо, он должен быть динамическим и вы хотели добавить туда idx из цикла while. Советы по php - не нужно делать проверки на что-то прямо в шаблоне (class=...). Вынесите их в отдельные функции, которые будут возвращать вам значение. Если вам потребовалось echo в шаблоне, значит вы что-то делаете не так и нужно вынести логику за пределы шаблона. Также, не нужно соединять получение данных из бд и вывод шаблона. Почитайте про MVC.
Единственное, что работает быстрее querySelector это getElementById. Для всего остального используйте querySelector и querySelectorAll. По принципу использования как любые css селекторы
Например:
// объявляем функцию
const count = () => {
// используем querySelectorAll чтобы указать, что нужны только tr в tbody
let list = document.querySelectorAll("#TheTable tbody tr");
// выводим значение 3 input
list.forEach( tr => console.log( tr.querySelectorAll('input')[3].value ));
}
// вызываем функцию
count();
forEach
querySelector
querySelectorAll