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>