Как заставить работать id елемента ?

Парни подскажите, прячу элемент которому присвоен id, таких элементов на странице несколько, но при нажатии открывается только последний  на какую бы кнопку не щелкнул или открывает но с содержимым последнего. как заставить работать корректно .? 

Использовать только один идентификатор для одного элемента.
id=«icms_modal»
остальные id=«icms_modal-2», id=«icms_modal-3» итд

А если я хочу скрыть элемент в списке контента ?  И этот этот элемент в каждой новости ? 

Использовать только один идентификатор для одного элемента.
id=«icms_modal»
остальные id=«icms_modal-2», id=«icms_modal-3» итд

А если я хочу скрыть элемент в списке контента ?  И этот этот элемент в каждой новости ? 

У каждой новости должен быть уник на элемент.
<div id=«news»>тут блок с новостью 1...</div>

<div id=«news»>тут блок с новостью 2...</div>

<div id=«news»>тут блок с новостью 3...</div>

Если в списке у новостей есть id=«news» — сработает только первый!
Сделайте для каждого разный айдишник.

Что то я пока смутно представляю как это реализовать в шаблоне списка контента. выводить столько полей сколько выведено в видимой части списка? Наверное проще реализовать тогда без ID . 

Понял, спасибо, суть понятна . 

Happy, наверняка вся магия происходит в цикле (смею так предположить). Тогда просто увеличивайте счетчик внутри цикла. 

<input type="checkbox" class="read-more-checker" id="read-more-checker" />
<div class="limiter">
<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
 <div class="bottom"></div>
</div>
<label for="read-more-checker" class="read-more-button"></label>
 
 
/* Стили для текстового поля с кнопкой "Далее" */
.limiter {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.limiter .bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(255 217 29 / 0%),
    rgb(255 217 29)90%);
  width: 100%;
  height: 60px;
  opacity: 1;
  transition: 0.3s;
}
.read-more-checker {
  opacity: 0;
  position: absolute;
}
.read-more-checker:checked ~ .limiter {
  max-height: none;
}
.read-more-checker:checked ~ .limiter .bottom {
  opacity: 0;
  transition: 0.3s;
}
.read-more-checker ~ .read-more-button:before {
  content: "Развернуть &raquo;";
}
.read-more-checker:checked ~ .read-more-button:before {
  content: "Свернуть &laquo;";
}
.read-more-button {
  cursor: pointer;
  display: inline-block;
  color: #777;
  text-decoration: underline;
}

У меня простецкий на одном css, если есть что то подобное со скриптами буду признателен