jQueryで複数のcsvを読み込んでページ上に表示させる

Question

前提・実現したいこと

結論
javascriptでcsvを複数読み込んでページ上に表示させる。

説明
csvファイルを読み込んで、ページ上で表示させたいのですが、読み込みたいcsvが複数あります。
また、1つのcsvファイルは固定で読み込みますが、もう1つのcsvファイルは、選択しているラジオボタンによって読み込むファイルを変更させたいです。
・①list.csv　→　常時読み込んで表示させる内容
・②form1.csv, form2.csv …　→　ラジオボタンの項目によって読み込む内容

上記それぞれを読み込むためのjsファイルを作成しています。

前提
アップロードするサーバーではphpなどは使用できない
ページ内で検索フォームと検索結果を両方表示させる必要がある

発生している問題・エラーメッセージ

①だけ、もしくは②だけであればそれぞれ読み込んで動作するのですが、
①②両方を読み込んだ際に、反応しなくなります。

csvを読み込む記述とhtmlを生成する記述が紐づいていないためかと思うのですが、
同様の内容の質問が見つからずに困っています。

該当のソースコード

①用のjsソースコード

//一覧表示用
function readCsv(data) {
  var target = '.list'; //csvを表示するところ
  var csv = $.csv.toArrays(data); //csv読み込み
  var insert = ''; //作るhtmlを入れるやつ
  for (var i = 0; i<csv.length;i++){
        //htmlの要素
        insert += '        <div class="item-list" data-no1="' + csv[i][0] + '" data-no2="' + csv[i][1] + '">';
        insert += '        </div>';
    }
  //作ったhtmlを挿入
  $(target).append(insert);
}

  //csvを読み込む
  $(document).ready(function(){
     var csvfile = 'list.csv';
    $.get(csvfile, readCsv, 'text');
  });

//読み込みが完了したら
$(document).ajaxStop(function() {

});//読み込みが終わったらここまで

②用のjsソースコード

//絞り込み項目用
function readCsv(data) {
  var target2 = '.form'; //csvを表示するところ
  var csv2 = $.csv.toArrays(data); //csv読み込み
  var insert2 = ''; //作るhtmlを入れるやつ
  for (var i = 0; i<csv2.length;i++){
        insert2 += '          <div class="box">'
        insert2 += '            <span class="label">' + csv2[i][0] + '</span>'
        insert2 += '            <ul>'
      for (var j = 1;j<csv2[i].length;j++){
        insert2 += '              <li><label><input type="checkbox" name="' + csv2[i][j] + '" value="' + csv2[i][j] + '">' + csv2[i][j] + '</label></li>'
      }
        insert2 += '            </ul>'
        insert2 += '          </div>'
  }
  //作ったhtmlを挿入
  $(target2).append(insert2);

  //csvを読み込む
  $(document).ready(function(){
    $('input[name="no1"]').change(function() {
      var val = $(this).val();
      if (val == 'テストA') {
        var csvfile2 = 'form1.csv';
        $.get(csvfile2, readCsv, 'text');
      } else if (val == 'テストB') {
        var csvfile2 = 'form2.csv';
        $.get(csvfile2, readCsv, 'text');
      }
      $(".form").empty();
    });
  });
}

//読み込みが完了したら
$(document).ajaxStop(function() {
});//読み込みが終わったらここまで

htmlの記述

  <section>
    <div class="wrap">
      <p class="sub-ttl"検索</p>
      <form class="search-form">
        <div class="box">
          <span class="label">1つめの項目</span>
          <ul>
            <li><input type="radio" name="no1" value="テストA" id="no1"><label for="no1">テストA</label></li>
            <li><input type="radio" name="no2" value="テストB" id="no2"><label for="no2">テストB</label></li>
          </div>
        </div>
        <div class="form">
        </div>
      </form>
    </section>

    <section>
      <div class="list">
      </div>
    </section>

※①②のjsコードはそれぞれ別ファイルにして読み込んでいます。

試したこと

・jsファイルを1つにまとめる→読み込まれるcsvファイルが同一のものになってしまった。

// csv読み込み関数
function readCsv(data) {
  //検索結果用
  var target = '.list'; //csvを表示するところ
  var csv = $.csv.toArrays(data); //csv読み込み
  var insert = ''; //作るhtmlを入れるやつ
  for (var i = 0; i<csv.length;i++){
        //htmlの要素
        insert += '        <div class="item-list" data-no1="' + csv[i][0] + '" data-no2="' + csv[i][1] + '">';
        insert += '        </div>';
    }
  //作ったhtmlを挿入
  $(target).append(insert);
}

  //絞り込み項目用
  var target2 = '.form'; //csvを表示するところ
  var csv2 = $.csv.toArrays(data); //csv読み込み
  var insert2 = ''; //作るhtmlを入れるやつ
  for (var i = 0; i<csv2.length;i++){
        insert2 += '          <div class="box">'
        insert2 += '            <span class="label">' + csv2[i][0] + '</span>'
        insert2 += '            <ul>'
      for (var j = 1;j<csv2[i].length;j++){
        insert2 += '              <li><label><input type="checkbox" name="' + csv2[i][j] + '" value="' + csv2[i][j] + '">' + csv2[i][j] + '</label></li>'
      }
        insert2 += '            </ul>'
        insert2 += '          </div>'
  }
  //作ったhtmlを挿入
  $(target2).append(insert2);

  //csvを読み込む
  $(document).ready(function(){
    //検索結果用
     var csvfile = 'list.csv';
    $.get(csvfile, readCsv, 'text');

    $('input[name="no1"]').change(function() {
      var val = $(this).val();
      if (val == 'テストA') {
        var csvfile2 = 'form1.csv';
        $.get(csvfile2, readCsv, 'text');
      } else if (val == 'テストB') {
        var csvfile2 = 'form2.csv';
        $.get(csvfile2, readCsv, 'text');
      }
      $(".form").empty();
    });
  });

//読み込みが完了したら
$(document).ajaxStop(function() {

});//読み込みが終わったらここまで

・下記ページなどを参考に修正を試みましたが②のcsvの切り替えの記述がわからず断念
https://teratail.com/questions/183007

それぞれのcsvが正しく読まれるにはどのように修正しなければいけないのか、お分かりになれば教えてください。

Comments

[KoichiSugiyama]

①②を一つにまとめたコードも動かなくても提示してもらった方が、どこで問題が起きているか指摘しやすくなりますので、差し支えない範囲で提示してください。
単に回答者のやり方で回答を記述するよりも質問者さんが作りかけたコードの問題点を直して動くようになった方が質問者さんも納得しやすいですし、理解が深まると思います。

[saisolla]

ありがとうございます。
1つにまとめて試した記述を　試したこと　の部分に追記しました。

Answer 1

readCsvが同一名なので後から追加したファイルのほうで上書きされます。

Comments

[saisolla]

ご回答ありがとうございます。

function readCsv(data) {

ご回答をもとに、①を
function readCsv(list) {
②を
function readCsv(data) {
にして試したのですが、うまくいきませんでした。
誤った場所であれば、正しい修正箇所をご教授いただけますでしょうか。

[kei344]

関数名が変わっていませんよ。

[saisolla]

ありがとうございます！
ご教授いただいた関数名と、同様の関数名が記述されている箇所を修正したことで動作ができました！
単純な見落としですが、答えをいただかなければ当分悩んでいたと思います。
ありがとうございます。