【Rails6】要素の表示・非表示を切り替えたい【HTML】

Question

前提・実現したいこと

Railsにて、予定・todoが管理できる自作アプリを製作中です。

以下のように、詳細ボタンをクリックすると、イベントの詳細が表示・非表示されるようにコードを書いています。

簡単な概要としては、詳細ボタンをクリックすることで「display: none」と「display: block」を切り替えられるようにしています。こちらのサイトを参考にして記述しています。

しかし、画像の通り、予定一覧（画像には３つの予定があるので、それぞれ「予定①」「予定②」「予定③」とします）の中にあるどの詳細ボタンを押しても、予定①の詳細が表示されてしまいます。これを、予定②に詳細ボタンを押すと予定②の詳細が、予定③の詳細ボタンを押すと予定③の詳細が…というように実装したいです。

予定一覧は、each文を使って、登録されているイベントを表示するようにしています。現状、label要素のfor属性とinput要素のid属性を、毎回同じ値で取得しているので、このような問題が起こっているのは分かるのですが、なかなか打開策が出てこなくて困っています。どなたか、ご教授の程、よろしくお願い致します。

該当のソースコード

index.html.erb

<div class="plan-list">
  <h1>予定一覧</h1>
  <ul class="plans">
    <% @events.each do |event| %>
      <% if event.category_id == 1 && d <= event.event_date %>
        <li class="a-plan">
          <div class="date-title-zone">
            <div class="date-zone">
              <%= event.event_date %>
            </div>
            <div class="title-zone">
              <%= event.title %>
            </div>
          </div>
          <div class="show-edit-delete-zone">
            <div class="show-zone">
              <label for="label#{event.id}">詳細</label>
              <input type="checkbox" id="label#{event.id}">
              <div class="show-hidden-zone-plan" style="z-index:2" >
                <%= event.title %><br>
                日付：<%= event.event_date %><br>
                <% if event.event_time %>
                  <% t = "#{event.event_time}" %>
                  <% time = t.slice(11..15) %>
                  時間：<%= time %><BR>
                <% else %>
                  時間：未設定<br>
                <% end %>
                <% unless event.detail == "" %>
                  内容：<%= event.detail %><br>
                <% else %>
                  内容：未設定<br>
                <% end %>
                ※再度クリックすると閉じます
              </div>
            </div>
            <div class="edit-zone">
              <%= link_to '変更', edit_event_path(event.id), method: :get %>
            </div>
            <div class="delete-zone">
              <%= link_to '削除', event_path(event.id), method: :delete %>
            </div>
          </div>
        </li>
      <% end %>
    <% end %>
  </ul>
</div>

index.css

.show-zone {
  margin: 0 4px;
  border: 1px solid gray;
  background: lightgray;
  position: relative;
}

.show-hidden-zone-plan {
  width: 40vw;
  position: absolute;
  border: 1px solid gray;
  background: pink;
  top: 30px;
  left: 10px;
  display: none;
  transition: 0.8s;
}

.show-zone input {
  display: none;
}

.show-zone input:checked ~ .show-hidden-zone-plan {
  display: block;
}.show-zone input {
  display: none;
}

.show-zone input:checked ~ .show-hidden-zone-plan {
  display: block;
}

試したこと

event.idは唯一性があるので、rubyの埋め込み用コード（<% ~ %>）を使って以下のように属性値にevent.id（変数）を入れて試しましたがsyntaxエラーが出ました。

<% label for="label#{event.id}" %>詳細</label>
<% input type="checkbox" id="label#{event.id}" %>

補足情報（FW/ツールのバージョンなど）

railsのバージョン　6.0.0

もし、以下のような方法があれば、ぜひ教えて頂きたいです。

①変数（今回でいうevent.idなど）を活用して、lebelの属性値やinputの属性値を設定する方法
②each文で配列から取り出す度に、labelの属性値を変えるような方法
③同じクラス名でも、要素の表示・非表示を、独立して行う方法（予定①の詳細ボタンを押すと、予定①の詳細だけ表示）
④その他、要素の表示・非表示に関するおすすめの方法

説明が不足している部分もあると思いますので、何かあれば質問してください。よろしくお願い致します。

Answer 1

<% %>の埋め込み方を工夫するとできました！

<label for="label<%= event.id %>">詳細</label>
<input type="checkbox" id="label<%= event.id %>">

見て頂いたり考えて頂いたりした方、ありがとうございました。これが誰かの役に立てれば幸いです！