th:each を使用して値を取りたい場所の初期表示方法がわからない

実現したいこと

入力画面で追加した要素を確認画面で表示
確認画面の編集ボタンを押して入力画面に戻った時に
動的に追加した要素も含め、入力してある状態にしたいです。
(編集できる状態)

発生している問題・分からないこと

初回は、そのままテキストで表示して
確認画面から編集ボタンを押して戻った時だけループさせて
追加分の要素を表示させたいのですが、入力画面の初回表示時に、リストが無く処理が飛ばされてテーブルが表示されなくなってしまっています。

該当のソースコード

<h2>アイテム入力</h2> <div th:if="${!#lists.isEmpty(infoList)}" th:each="infoList: ${infoList}" > <table class="vehicleInfo"> <tbody> <tr> <th>購入場所</th> <td> <input type="text" class="place" th:value="${infoList.place}" name="place" > </td> </tr> <tr> <th> アイテム </th> <td> <input type="text" class="items" th:value="${infoList.item}" name="item" > </td> </tr> <tr> <th> 期日 </th> <td> <input type="text" class="js-datepicker" th:value="${infoList.datepicker}" name="datepicker" > </td> </tr> </tbody> </table> </div> <input type="button" value="情報を追加する" class="add pluralBtn"> <input type="button" value="情報を削除する" class="del pluralBtn">

<h2>アイテム確認</h2> <div th:if="${!#lists.isEmpty(infoList)}" th:each="infoList: ${infoList}"> <p class="page"></p> <h3 class="tableheader">車両情報</h3> <table> <tr> <th>購入場所</th> <td th:text="${infoList.place}">購入場所</td> </tr> <tr> <th>アイテム </th> <td th:text="${infoList.item}">アイテム </td> </tr> <tr> <th>期日</th> <td th:text="${infoList.datepicker}">期日</td> </tr> </table> <button id="editButton" type="submit" data-action="/item">編集</button>

jQuery

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2<script type="text/javascript"> 3$(document).on("click", ".add", function() { 4 $(this).parent().clone(true).insertAfter($(this).parent()); 5}); 6$(document).on("click", ".del", function() { 7 var target = $(this).parent(); 8 if (target.parent().children().length > 1) { 9 target.remove(); 10 } 11}); 12</script>

試したこと・調べたこと

上記の詳細・結果

Thymeleaf 使い方についていろいろ調べましたが、実現が出来ないでいます。

補足

特になし