onclickを使ったJSが機能しないです

Question

onclickを使って「クリックしたら指定の画像が表示される」という機能を実装したいのですが実装できません。
コードは以下になります。

<section id="compact-kimono" class="compact-kimono fadein">
  <div class="inner">
    <p class="compact-kimono-txt">コンパクトプラン対象の衣装はこちら</p>
    <nav class="dlnav">
      <dl>
        <dt>《店舗別に衣装を調べる》</dt>
        <dd><a onclick="clickBtn1()">半田スタジオ</a></dd>
        <dd><a onclick="clickBtn2()">鶴舞スタジオ</a></dd>
        <dd><a onclick="clickBtn3()">大府スタジオ</a></dd>
        <dd><a onclick="clickBtn4()">豊田スタジオ</a></dd>
        <dd><a onclick="clickBtn5()">横須賀スタジオ</a></dd>
        <dd><a onclick="clickBtn6()">サクラヒルズ</a></dd>
      </dl>
    </nav>
    <ul class="gallerylist">
      <li id="handa"><a href="./img/costume/kimono/handa/2h.jpg" class="swipebox" title="半田スタジオ"><img src="./img/costume/kimono/handa/2h.jpg" alt=""></a></li>
      <li id="handa"><a href="./img/costume/kimono/handa/3h.jpg" class="swipebox" title="半田スタジオ"><img src="./img/costume/kimono/handa/3h.jpg" alt=""></a></li>
      <li id="handa"><a href="./img/costume/kimono/handa/4h.jpg" class="swipebox" title="半田スタジオ"><img src="./img/costume/kimono/handa/4h.jpg" alt=""></a></li>
      <li id="tsurumai"><a href="./img/costume/kimono/tsurumai/1t.jpg" class="swipebox" title="鶴舞スタジオ"><img src="./img/costume/kimono/tsurumai/1t.jpg" alt=""></a></li>
      <li id="tsurumai"><a href="./img/costume/kimono/tsurumai/2t.jpg" class="swipebox" title="鶴舞スタジオ"><img src="./img/costume/kimono/tsurumai/2t.jpg" alt=""></a></li>
      <li id="tsurumai"><a href="./img/costume/kimono/tsurumai/3t.jpg" class="swipebox" title="鶴舞スタジオ"><img src="./img/costume/kimono/tsurumai/3t.jpg" alt=""></a></li>
      <li id="obu"><a href="./img/costume/kimono/obu/1o.jpg" class="swipebox" title="大府スタジオ"><img src="./img/costume/kimono/obu/1o.jpg" alt=""></a></li>
      <li id="obu"><a href="./img/costume/kimono/obu/2o.jpg" class="swipebox" title="大府スタジオ"><img src="./img/costume/kimono/obu/2o.jpg" alt=""></a></li>
      <li id="obu"><a href="./img/costume/kimono/obu/3o.jpg" class="swipebox" title="大府スタジオ"><img src="./img/costume/kimono/obu/3o.jpg" alt=""></a></li>
      <li id="obu"><a href="./img/costume/kimono/obu/4o.jpg" class="swipebox" title="大府スタジオ"><img src="./img/costume/kimono/obu/4o.jpg" alt=""></a></li>
      <li id="toyota"><a href="./img/costume/kimono/toyota/1toyo.jpg" class="swipebox" title=" 豊田スタジオ"><img src="./img/costume/kimono/toyota/1toyo.jpg" alt=""></a></li>
      <li id="toyota"><a href="./img/costume/kimono/toyota/2toyo.jpg" class="swipebox" title=" 豊田スタジオ"><img src="./img/costume/kimono/toyota/2toyo.jpg" alt=""></a></li>
      <li id="toyota"><a href="./img/costume/kimono/toyota/3toyo.jpg" class="swipebox" title=" 豊田スタジオ"><img src="./img/costume/kimono/toyota/3toyo.jpg" alt=""></a></li>
      <li id="toyota"><a href="./img/costume/kimono/toyota/4toyo.jpg" class="swipebox" title=" 豊田スタジオ"><img src="./img/costume/kimono/toyota/4toyo.jpg" alt=""></a></li>
      <li id="yokosuka"><a href="./img/costume/kimono/yokosuka/1y.jpg" class="swipebox" title="横須賀スタジオ"><img src="./img/costume/kimono/yokosuka/1y.jpg" alt=""></a></li>
      <li id="yokosuka"><a href="./img/costume/kimono/yokosuka/2y.jpg" class="swipebox" title="横須賀スタジオ"><img src="./img/costume/kimono/yokosuka/2y.jpg" alt=""></a></li>
      <li id="yokosuka"><a href="./img/costume/kimono/yokosuka/3y.jpg" class="swipebox" title="横須賀スタジオ"><img src="./img/costume/kimono/yokosuka/3y.jpg" alt=""></a></li>
      <li id="yokosuka"><a href="./img/costume/kimono/yokosuka/4y.jpg" class="swipebox" title="横須賀スタジオ"><img src="./img/costume/kimono/yokosuka/4y.jpg" alt=""></a></li>
      <li id="sakura"><a href="./img/costume/kimono/sakura/1s.jpg" class="swipebox" title="サクラヒルズ"><img src="./img/costume/kimono/sakura/1s.jpg" alt=""></a></li>
      <li id="sakura"><a href="./img/costume/kimono/sakura/2s.jpg" class="swipebox" title="サクラヒルズ"><img src="./img/costume/kimono/sakura/2s.jpg" alt=""></a></li>
      <li id="sakura"><a href="./img/costume/kimono/sakura/3s.jpg" class="swipebox" title="サクラヒルズ"><img src="./img/costume/kimono/sakura/3s.jpg" alt=""></a></li>
      <li id="sakura"><a href="./img/costume/kimono/sakura/4s.jpg" class="swipebox" title="サクラヒルズ"><img src="./img/costume/kimono/sakura/4s.jpg" alt=""></a></li>
     </ul>
  </div>  
  </section>

<script>
//初期表示は非表示
document.getElementById("handa").style.display ="none";

function clickBtn1(){
	const p1 = document.getElementById("handa");

	if(p1.style.display=="block"){
		// noneで非表示
		p1.style.display ="none";
	}else{
		// blockで表示
		p1.style.display ="block";
	}
}
</script>

galleryの1つ目のid="handa"は実装されており「初期設定で画像がdisplay:none」→「半田スタジオをクリックすると画像が出てくる」というものが実行されるのですが、2つ目と3つ目のid="handa"では実装されていません。
1つのページにidは1つだけだからでしょうか？

どのようにしたら2つ目と3つ目のid="handa"の画像も同じく実装できるでしょうか？
どなたか解決案のわかる方はおられませんか？
居ましたらご連絡よろしくお願いいたします！

Comments

[pekopekoapricot]

基本的にhtmlの中に同じidは複数存在しないほうがよいです。
同じものなら class を使えばよいのでは？
idではいけない理由はあるのですか？

[hentaiman]

> 1つのページにidは1つだけだからでしょうか？
この違和感に気付けたのならさらに調査する事で進展すると思われます。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id

[m.ts10806]

jQueryは本件と関係かと思います。

Answer 1

1つのページにidは1つだけだからでしょうか？

はい。「ID」は「identity」ですから。

どのようにしたら2つ目と3つ目のid="handa"の画像も同じく実装できるでしょうか？

同じ挙動させたい要素に同じクラスをつけ、そのクラスに対して実装すると良いです。

Answer 2

liのidが被っているのでNG。
idをクラスにするかdata-studioなどカスタムデータに変更してください