jqueryでループしたいだけ

Question

htmlで、ベタ書きしている箇所をループにしたいだけなんですが、
一日近く格闘して、どうにもうまくいきません。

ベタ書きの下記htmlでは、slctline2～6の<div th:replace="this :: sortAjaxBody"></div>の部分が、slctline1の<div th:fragment="sortAjaxBody">で囲まれた部分と置き換わり、画面にプルダウンなどが6個並んだ状態になるのですが、
ループ（※いろいろ試しましたがいったん割愛）にし、html的にはベタ書きと同じ形までもっていくことはできるのですが、<div th:replace="this :: sortAjaxBody"></div>が置き換わらずにそのままです。画面には表示されません。

Thymeleafにこだわりがあるわけではなく、slctline1の内容をitmMap のサイズ分だけID付きで並べたい、というのが目指すゴールになります。

アドバイスをいただけるとありがたいです。

（コントローラからこういうMAPを送っています）
private static final Map<String, String> itmMap = Collections
		.unmodifiableMap(new LinkedHashMap<String, String>() {
			{
				put("いちご","fluit1");
				put("りんご","fluit2");
				put("めろん","fluit3");
				put("ばなな","fluit4");
				put("もも","fluit5");
				put("さくらんぼ","fluit6");
		}
});

<div id="slctline">
	<div id="slctline1"><div th:fragment="sortAjaxBody">
		<div class="inline-block">
			<select name="sortitem">
				<option value="">選択してください</option>
				<option th:each="itm:${itmMap}"
				th:value="${itm.value}" th:inline="text">[[${itm.key}]]		
				</option>
			</select>
		</div>
		<div class="inline-block">
			<select name="sortcon" >
				<option value="asc">昇順</option>
				<option value="desc">降順</option>
			</select>
		</div></div>
	</div>
<!-- ここから -->
	<div id="slctline2"><div th:replace="this :: sortAjaxBody"></div></div>
	<div id="slctline3"><div th:replace="this :: sortAjaxBody"></div></div>
	<div id="slctline4"><div th:replace="this :: sortAjaxBody"></div></div>
	<div id="slctline5"><div th:replace="this :: sortAjaxBody"></div></div>
	<div id="slctline6"><div th:replace="this :: sortAjaxBody"></div></div>
<!-- ここまで -->
</div>

//ひとまずここでは
//上記htmlからslctline2～6を削除したうえで、slctline2～6タグを作っています
//itmMap のサイズがjs上で取得できず（うまくいかず）、コントローラからmapサイズを別途送っています

var mapSize = /*[[${mpsiz}]]*/0;
window.onload =function() {
	for(var i = 2;  i <= mapSize;  i++) {
		$('#slctline').append('<div id="abcdefgz"></div>');
		$('#abcdefgz').attr('id', 'slctline' + i);
	}
}

//これは、ボタンを置いて
//１クリック毎に上記slctline2～6タグに<div th:replace="this :: sortAjaxBody">を追記しています
//mapSize分クリックすると、べた書きhtmlと同じコードになります

$("#button").on('click', function() {
	for(i = 2; i <= mapSize; i++) {
		var $line = document.getElementById("slctline" + i);
		if (!$line.hasChildNodes()) {
			$line.insertAdjacentHTML('beforeend', '<div th:replace="this :: sortAjaxBody"></div>');
			break;
		}
	}
});

Answer 1

Thymeleafはわからないのですが、クライアント側の話なのかな？という認識で回答いたします。

id="slctline1" の中身そのままでいいのであれば以下のようなコードでいいのかなと思います。
また、HTMLとJSのファイルが別れていて、HTMLレンダリング後、JSが実行される状態であるという認識です。

<!-- id="slctline" の属性に th:data-copy-num を追加 -->
<div id="slctline" th:data-copy-num="${mpsiz}">
    <div id="slctline1"><div th:fragment="sortAjaxBody">
        <div class="inline-block">
            <select name="sortitem">
                <option value="">選択してください</option>
                <option th:each="itm:${itmMap}"
                th:value="${itm.value}" th:inline="text">[[${itm.key}]]        
                </option>
            </select>
        </div>
        <div class="inline-block">
            <select name="sortcon" >
                <option value="asc">昇順</option>
                <option value="desc">降順</option>
            </select>
        </div></div>
    </div>
</div>

var mapSize = $('#slctline').data('copy-num');
window.onload = function() {
    var $slctline1 = $('#slctline1');
    for(var i = 2;  i <= mapSize;  i++) {
        var $newObj = $slctline1.clone();
        $newObj.attr('id', 'slctline' + i);
        $('#slctline').append($newObj);
    }
}

Comments

[tohmey]

ありがとうございました。
バッチリやりたいことが実現できました！

MAPサイズの取り方も併せて、大変勉強になりました。