Uncaught TypeError: row.querySelector(...) is null | Spring Boot, Thymeleaf, Bootstrap, Script

Question

From my model class, I have sent payload to the view model.addAttribute("savedLinks", savedLinksResult.data) and then render the HTML view.

I have this code in the HTML

<div id="linksContainer">
                    <table class="table">
                        <tbody>
                        <tr th:each="link, linkStatus : ${savedLinks.linksList}">
                            <td>
                                <input type="text" class="form-control" name="linksList[${linkStatus.index}].title"
                                       placeholder="Link Title (ex: Blog)" th:value="${link.title}">
                            </td>
                            <td>
                                <input type="text" class="form-control" name="linksList[${linkStatus.index}].url"
                                       placeholder="Link URL (ex: https://abc.xyz/)" th:value="${link.url}">
                            </td>
                            <td>
                                <input type="text" class="form-control" name="linksList[${linkStatus.index}].buttonTitle"
                                       placeholder="Button Title (ex: Visit)" th:value="${link.actionButtonTitle}">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

To show the list of data from the given payload.

I have two buttons, 1. To add a new form and 2. To remove last one.

On Add Button click I'm adding a new Input form to the UI and the code is

function addLinkRow() {
            const linksTable = document.querySelector("#linksContainer table tbody");
            linkCount++;
            const newRow = document.createElement("tr");
            newRow.innerHTML = `
            <td>
                <input type="text" class="form-control" name="linksList[${linkCount}].title" placeholder="Link Title (ex: Blog)">
            </td>
            <td>
                <input type="text" class="form-control" name="linksList[${linkCount}].url" placeholder="Link URL (ex: https://abc.xyz/)">
            </td>
            <td>
                <input type="text" class="form-control" name="linksList[${linkCount}].buttonTitle" placeholder="Button Title (ex: Visit)">
            </td>
        `;
            linksTable.appendChild(newRow);
        }

Everything is okay till this.

But when I want to collect list of the data from the UI and my code is

// Collect links data
            const linkRows = document.querySelectorAll("#linksContainer table tbody tr");
            linkRows.forEach((row, index) => {
                const linkTitle = row.querySelector("input[name='linksList[" + index + "].title']").value;
                const linkURL = row.querySelector("input[name='linksList[" + index + "].url']").value;
                const buttonTitle = row.querySelector("input[name='linksList[" + index + "].buttonTitle']").value;
                formData.linksList.push({ title: linkTitle, url: linkURL, actionButtonTitle: buttonTitle });
            });
            console.log(formData.linksList)

throws this error

Uncaught TypeError: row.querySelector(...) is null

caused by this line of

const linkRows = document.querySelectorAll("#linksContainer table tbody tr");

It seems okay to me but couldn't able to find the exact reason.