ajaxzip3 複数のボタン設置について

Question

ajaxzip3を使い、郵便番号入力ごボタンクリックで住所入力ができるように
下記サイトを参考に実装しました。

https://techmemo.biz/javascript/ajaxzip3-click-ziptoaddress/

一つの住所入力はできたのですが
３つのラジオボタンの選択で項目を出し分けることになり
同一html内に３つ住所入力が必要になりました。

$('#zip-btn').on('click', function() {
  AjaxZip3.zip2addr('zip1','','pref','city');

  //成功時に実行する処理
  AjaxZip3.onSuccess = function() {
    setTimeout(function() {
      $('.address').focus();
    },10);
  };

  //失敗時に実行する処理
  AjaxZip3.onFailure = function() {
    alert('郵便番号に該当する住所が見つかりません');
  };
  
  return false;
});

<table>
    <tr>
        <td><input type="text" name="zip1" name="郵便番号" placeholder="5310071"></td>
        <td><button type="button" id="zip-btn" class="postcode_btn" href="#">郵便番号から検索</button></td>
    </tr>
　<tr>
    　<td>
            <p class="split_title">都道府県<span class="label_06">必須</span></p>
            <p class="select_02">  
                 <select name="pref" class="pref">
                     <option value="" selected>都道府県</option>
                     <option value="1">北海道</option>
                     <option value="2">青森県</option>
                     <option value="3">岩手県</option>
                    <option value="4">宮城県</option>
                    <option value="5">秋田県</option>
                    <option value="6">山形県</option>
                    <option value="7">福島県</option>
                    <option value="8">茨城県</option>
                    <option value="9">栃木県</option>
                    <option value="10">群馬県</option>
                    <option value="11">埼玉県</option>
                  </select>
              </p>
           </td>
          <td>
               <p class="split_title">市区町村<span class="label_06">必須</span></p>
               <input type="text" name="city" placeholder="大阪市北区中津3丁目">
          </td>
       </tr>
　　<tr>
         <td>
             <p class="split_title">番地<span class="label_06">必須</span></p>
              <input type="text" name="address" placeholder="7-3">
         </td>
         <td>
             <p class="split_title">建物名<span class="label_07">任意</span></p>
             <input type="text" name="建物名" placeholder="ビルコ">
         </td>
    </tr>
</table>

#zip-btnを<button>タグにid指定すれば実装できていたのですが
idなので、一つの住所入力しかできませんでした。
こちらをclass指定に変えてみたのですが、そうすると動かなくなってしまいました。

こちら、解決策がわかる方がいましたら、ご教授いただければ幸いです。

※htmlも追記しました。セレクトの都道府県は長かったので消しています。

Comments

[maisumakun]

HTMLもご提示いただけますか？

[yuko_momi]

html追記いたしました。
郵便番号から下の部分だけですが、大丈夫でしょうか？
また、このtableが一つのhtmlに３つあり、この状態ですと、一つ目のものはちゃんと機能しています。
２個目３個目が機能しない状態です。

Answer 1

Githubにあったソースコードを見てみましたが、AjaxZip3.zip2addr('zip1','','pref','city');の'zip1'はフォームの名前のようですから、ボタンをクラスに設定するにしてもここを適切にしないと動かないのではないでしょうか。

Comments

[yuko_momi]

完全に動かないのではなく、一つ目だけは動くんです。。。

[Lhankor_Mhy]

ですので、2つ目以降が一つ目と同じではダメなのではないでしょうか、ということが回答の趣旨です。

[Lhankor_Mhy]

わかりにくいですかね？

一般に住所フォームの郵便番号自動入力を複数設置する場合、「郵便番号から検索」ボタンだけを増やすというのは考えにくいです。（それでは役に立たないため）
ですので、郵便番号欄や住所欄もボタンの数だけ増やすのが一般的ですし、おそらくあなたもそうしているだろう、という予想に基づく回答をしています。

郵便番号欄や住所欄が複数あるにもかかわらず、2つ目以降のコードが一つ目の郵便番号欄や住所欄を指していては、不都合があるのではないですか？　そこは変える必要がありませんか？

ということが回答の趣旨ですので、もし「いや、郵便番号欄や住所欄はひとつだけでボタンだけ増やしたい」ということであれば、その旨を質問に追記することをおすすめします。