Thymeleaf th：每个用javascript DOM操作都会导致奇怪的错误

Question

我有一个简单的Thymeleaf：每个循环看起来像这样：

<div class="list-group-item" th:each="scenarioList, scenarioIndex : ${allScenarios}">
  <button type="button" class="btn btn-dark d-inline-block" th:id="'path_'+${scenarioIndex.index}">Button</button>
  .
  .
  .  
</div>

我需要在Javascript函数中为按钮提供正确的innerTexts，因为需要进行一些拼接。它看起来像这样：

<script th:inline="javascript">
        /*<![CDATA[*/
        var allScenarios =  /*[[${allScenarios}]]*/ null;
        for (var i = 0; i < 5; i++){
            var path = allScenarios[i].path;
            path = path.slice(0, path.lastIndexOf('\\'));
            document.getElementById("path_" + i).innerText = path;
        }
        /*]]>*/
</script>

现在发生了一件奇怪的事情。仅设置了第一个和最后一个按钮innerTexts。所有其他人都保留默认＆＃34;按钮＆＃34;文本。当我尝试在我的浏览器上的javascript控制台中手动设置按钮的innerText时，会发生同样的事情 - 我可以设置第一个和最后一个按钮文本，但不能设置中间按钮文本。当我在控制台中检查什么是中间按钮innerText时，它似乎是通过javascript函数正确设置的，但是没有显示在网页上。