jQueryでフィルタリングのコードを整理したい

Question

jsonを読み込みコードを生成、jQueryでフィルタリング表示するコンテンツをページの２か所に設置しています。
フィルタリングに関しては初期表示は８個、もっと見るをクリックでさらに８個ずつ追加表示というようにしています。

１つ目のコードをそのまま複製するような形で下記のように複製してみたのですが、もっとスマートにjqueryを記述するにはどのようにすればいいのでしょうか？
よろしくお願い致します。

$(function(){
		
        //１つ目
		//変数設定
		var $boxes = $("#boxes");
		var alldata = []; //ここはすべてのデータを保持しておく配列
		var filterdata = []; //フィルターを掛けたデータを保持する配列

		//最初に読み込んだ時に発生する関数
		$.getJSON('1つ目のjsonのパス',init);

		function init(data) {
			//全データを保持しておく
			alldata = data;
			//とりあえず全データを代入しておく
			filterdata = alldata;
			//データを表示させる
			display(0);
		}
		
		const MAX_DISPLAY_COUNT = 8;

		//画像表示させるための関数
		function display(startIndex) {
			//$boxes.empty();
			$('.original-tab-more-btn').show();
			for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) {
			if(!filterdata[i]){
				$('.original-tab-more-btn').hide();
			return;
			}
				$('<div class="original-tab-elm matchHeight"><a href="' + filterdata[i].url + '" target="_top" class="block"><div class="product-img img-col1"><img src="' + filterdata[i].img + '" alt="" id="product-img"></div><div class="label-wrap"><p class="img-label' + filterdata[i].labelName + '">' + filterdata[i].dateText + '</p><p class="img-label' + filterdata[i].labelName2 + '">' + filterdata[i].dateText2 + '</p></div><p class="price-text">' + filterdata[i].price + '</p></a></div>').appendTo($boxes);
			}
		}
		
		let currentDisplayCount = 0;
		
		//ラジオボタンが変わった時にフィルタリングする関数
		$('.original-filter input:radio').change(function(){
			
			$boxes.empty();
			
			//チェックボタンの状況によってフィルタリングする
			var cate=$(this).val();
			//フィルターの配列をいったん空っぽにする
			filterdata=[];						

			if(cate==="all"){//allが選択されたら全データを保持
				filterdata=alldata;

			}else{ 
				filterdata=$.grep(alldata,function(n){
					return n.category===cate;
				});
			}

			currentDisplayCount = 0;
    		display(currentDisplayCount);
		
		});
		
		//もっと見るで要素を追加させたい
		$('.original-tab-more-btn').click(function () {
			currentDisplayCount += MAX_DISPLAY_COUNT;
			display(currentDisplayCount);
		});
});         
$(function(){

　　　　　//２つ目
　　　　　//変数設定
		var $boxes2 = $("#select-boxes");
		var alldata2 = []; //ここはすべてのデータを保持しておく配列
		var filterdata2 = []; //フィルターを掛けたデータを保持する配列

		//最初に読み込んだ時に発生する関数
		$.getJSON('2つ目のjsonのパス',init);

		function init(data2) {
			//全データを保持しておく
			alldata2 = data2;
			//とりあえず全データを代入しておく
			filterdata2 = alldata2;
			//データを表示させる
			display2(0);
		}
		
		const MAX_DISPLAY_COUNT2 = 8;

		//画像表示させるための関数
		function display2(startIndex2) {
			//$boxes.empty();
			$('.select-tab-more-btn').show();
			for (var i = startIndex2; i < startIndex2 + MAX_DISPLAY_COUNT2; i++) {
			if(!filterdata2[i]){
				$('.select-tab-more-btn').hide();
			return;
			}
				$('<div class="select-tab-elm matchHeight"><a href="' + filterdata2[i].url + '" target="_top" class="block"><div class="product-img img-col1"><img src="' + filterdata2[i].img + '" alt="" id="product-img"></div><div class="label-wrap"><p class="img-label' + filterdata2[i].labelName + '">' + filterdata2[i].dateText + '</p><p class="img-label' + filterdata2[i].labelName2 + '">' + filterdata2[i].dateText2 + '</p></div><p class="price-text">' + filterdata2[i].price + '</p></a></div>').appendTo($boxes2);
			}
		}
		
		let currentDisplayCount2 = 0;
		
		//ラジオボタンが変わった時にフィルタリングする関数
		$('.select-filter input:radio').change(function(){
			
			$boxes2.empty();
			
			//チェックボタンの状況によってフィルタリングする
			var cate2=$(this).val();
			
			//フィルターの配列をいったん空っぽにする
			filterdata2=[];

			if(cate2==="all"){//allが選択されたら全データを保持
				filterdata2=alldata2;

			}else{ 
				filterdata2=$.grep(alldata2,function(n){
					return n.category===cate2;
				});
			}

			currentDisplayCount2 = 0;
    		display2(currentDisplayCount2);
			
		});
		
		//もっと見るで要素を追加させたい
		$('.select-tab-more-btn').click(function () {
			currentDisplayCount2 += MAX_DISPLAY_COUNT2;
			display2(currentDisplayCount2);
		});
});
		
	

[

{
"category": "new",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},	
	
{
"category": "re",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},

]

[

{
"category": "new-s",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},	
	
{
"category": "re-s",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},

]

<!--１つ目-->
<form>					
	<label>
		<input type="radio" name="list" value="all" checked="checked">
		<span>All</span>
	</label>
	<label>
		<input type="radio" name="list" value="new">
		<span>new</span>
	</label>
	<label>
		<input type="radio" name="list" value="re">
		<span>re</span>
	</label>
</form>
					
<div id="boxes" class="boxes cf"></div>
<div class="original-tab-more-btn">もっと見る</div>

<!--２つ目-->
<form>					
	<label class="btn-on">
		<input type="radio" name="list" value="all" checked="checked">
		<span>All</span>
	</label>
	<label>
		<input type="radio" name="list" value="new-s">
		<span>new</span>
	</label>
	<label>
		<input type="radio" name="list" value="re-s">
		<span>re</span>
	</label>
</form>
					
<div id="select-boxes" class="boxes cf"></div>
<div class="select-tab-more-btn">もっと見る</div>

Comments

[yambejp]

HTMLとjsonデータを例示して、想定する結果を説明してください

[ysfree14]

追記しました、よろしくお願い致します。

Answer 1

init関数が2度設置されたりしてちょっと整合性が取れていないと思います
$.getJSON()が２度実行されているのは、最初が１つ目のJSON、次のが２つ目のJSONを呼ぶのでしょうか？

sample

<script>
$(function(){
  a();
  function a(){
    console.log(1);
  }
  a();
  function a(){
    console.log(2);
  }
  a();
});
</script>

※競合した名前の関数を設定しても、上書きされてあとの方しか実行されません

Comments

[ysfree14]

回答ありがとうございます。
はい、最初が１つ目のjsonで次が２つ目のjsonを読み込んでいます。
通常は複数のinit関数は使用しないのでしょうか？

[yambejp]

sampleつけておきました

[ysfree14]

回答ありがとうございます。
1つ目・2つ目の処理それぞれを$(function(){　～　});で囲っていると正常に動作します。
これで一応は問題ないでしょうか？