Создать отдельные div с динамическим идентификатором ERB

Я пытаюсь сделать два отдельных div (называемых sample-pack-button) с моей ERB (каждая со своей собственной связью внутри div), но на данный момент divs не создаются отдельно, и есть только один div present содержащий обе ссылки. Вот мой код:

<div id="sample-pack-container">
  <div id="sample-pack-background">
    <% @sample_packs.each do |sample_pack| %>
      <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>">
      <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %>
      <% end %>
      </div>
  </div>
</div>

Итак, на данный момент у меня есть один div, который содержит ссылки 'kit1' и 'kit2', тогда как в каждом из них должно быть два отдельных div с ссылкой.

Когда я проверяю элемент на html, я обнаружил, что id="sample-pack-kit2" вложен внутри id="sample-pack-kit1" который, как я думаю, не должен быть так:

<div id="sample-pack-container">
 <div id="sample-pack-background">
  <div class="sample-pack-button" id="sample-pack-kit1">
    <a href="/sample_packs/1/play">kit1</a>
    <div class="sample-pack-button" id="sample-pack-kit2">
      <a href="/sample_packs/2/play">kit2</a>
  </div>
 </div>
</div>

Я не уверен, что это структурная проблема с моей ERB или проблема с моим CSS. Мой CSS:

#sample-pack-container {
  max-width: 913px;
  margin-top: 300px;
  margin-left: 600px;
}

#sample-pack-background {
  position: relative;
}

.sample-pack-button {
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: #8B959E;
}

Я попытался переместить мой ERB, поставив class="sample-pack-button" над методом .each и создав новый p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>" но я все еще получаю только один div.

Итак, в общем, я пытаюсь создать два уникальных div, которые содержат ссылку на соответствующий образец-пакет.