DBデータをクリックしたら対応するデータのみを表示させたい。

Question

下記のサイトの様に日本語をクリックしたら英文が表示されるようにしたいです。
バックエンドをLaravelでデータを保存してフロントをJavascriptまたはVueで実装したいのですが、
どのデータをクリックしても一番上（$key[0]）が反応してしまいます。

何かいい方法がありましたら教えて頂きたいです。

https://www.maetoronto.com/ieltsblog-pronunciation2/

index.blade.php

   @foreach ($languages as $key => $language)
　　 <div class="">
     <button onclick="myFunction()"> {{ $key  }}. {{ $language->japanese }} </button>
              <p class="myDiv" id="myDIV" >{{ $language->english }} </p> 
            </div>
   @endforeach

    function myFunction() {
   var element = document.getElementById("myDIV");
   
    element.classList.toggle("myDIVShow");
}
        </script>

     .myDiv{
            display:none;
        }

        .myDIVShow{
            display:block;
        }

Answer 1

htmlにおいて、同一ページ内でidは重複してはいけません。