サムネイル付きbxsliderを複数設置：ID別にJSでサムネイルを自動出力したい

JS初心者です。
サムネイルが付いたbxsliderを複数設置しようとしています。
サムネイルはHTMLに個別記述ではなくJSで自動出力したいと思っています。

●動作が確認できるHTMLとJS

【HTML】

<ul id="hoge">
<li><img src="hoge01.jpg" alt=""></li>
<li><img src="hoge02.jpg" alt=""></li>
<li><img src="hoge03.jpg" alt=""></li>
</ul>
<ul class="custom-thumb"></ul>

【JS】

<script>
$(function() {
	var thumbWidth = 150;
	var thumbHeight = 100;

	var insert = '';
	for (var i = 0; i < $('#hoge li').length; i++) {
		insert += '<li><a data-slide-index="' + i + '" href="javascript:void(0);"><img src="' + $('#hoge li').eq(i).children('img').attr('src') + '" width="' + thumbWidth + '" height="' + thumbHeight + '"></a></li>';
	};
	$('.custom-thumb').append(insert);
	
	$('#hoge').bxSlider({
		pagerCustom: '.custom-thumb',
	});
});
</script>

上記の場合は単体なので当然動くのですが、今回はスライドを複数設置したいため、
IDにhoge001,hoge002など番号を付随して別々のサムネイルを取得し、それぞれで動かしたいと考えています。

●実際動作させたいHTML

【HTML】

<ul id="hoge001">
<li><img src="hoge01.jpg" alt=""></li>
<li><img src="hoge02.jpg" alt=""></li>
<li><img src="hoge03.jpg" alt=""></li>
</ul>
<ul class="custom-thumb"></ul>

<ul id="hoge002">
<li><img src="hoge04.jpg" alt=""></li>
<li><img src="hoge05.jpg" alt=""></li>
<li><img src="hoge06.jpg" alt=""></li>
</ul>
<ul class="custom-thumb"></ul>

JSでどのようにIDを取得し、各サムネイル画像を出力させれば良いでしょうか？
ご教示ください。どうぞよろしくお願いいたします。