Кнопки на javascript вместо checkbox
 

В постбите у каждого пользователя на форуме есть скрытый div, который раньше открывался и закрывался с помощью checkbox, однако, было принято решение заменить все это дело на кнопки через js. Столкнулся со следующей проблемой: кнопка работает, но только в самом первом сообщении темы, а далее отказываться напрочь работать. Как это исправить?

<script>
function myFunction() {
  var x = document.getElementById("hidden");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<button onclick="myFunction()", class="abilitybutton">Способности</button>

<div id="hidden">

<xf:set var="$viewableItems" value="{{ dbtech_shop_viewable_items($user) }}" />

<xf:if is="$viewableItems AND $xf.options.dbtech_shop_items_postbit.0">
	<xf:foreach loop="$viewableItems" value="$itemInfo">
		<xf:if is="$xf.options.dbtech_shop_enablegiftgiver AND $itemInfo.purchase.gifted">
			<xf:if is="$itemInfo.purchase.message is not empty">
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y_message', {
												  'user': $itemInfo.buyer,
												  'message': $itemInfo.purchase.message
												  }) }}" />
			<xf:else />
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y', {
												  'user': $itemInfo.buyer
												  }) }}" />
			</xf:if>
		<xf:else />
			<xf:set var="$title_extra" value="" />
		</xf:if>
		<a href="{{ link('dbtech-shop/item', {'id': $itemInfo.purchase.itemid, 'title': $itemInfo.purchase.title}, {'shopid': $itemInfo.purchase.shopid}) }}" data-xf-click="overlay"><img src="{$itemInfo.purchase.icon}" alt="{$itemInfo.purchase.title}" title="{$itemInfo.purchase.title}:  {$itemInfo.purchase.description|raw}" style="padding:1px;" /></a>
	</xf:foreach>	
</xf:if>
</div>

Раньше работало так

<input type="checkbox" id={$post.post_id} style="display:none;">
<div id="hidden">

<xf:set var="$viewableItems" value="{{ dbtech_shop_viewable_items($user) }}" />


<xf:if is="$viewableItems AND $xf.options.dbtech_shop_items_postbit.0">
	<xf:foreach loop="$viewableItems" value="$itemInfo">
		<xf:if is="$xf.options.dbtech_shop_enablegiftgiver AND $itemInfo.purchase.gifted">
			<xf:if is="$itemInfo.purchase.message is not empty">
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y_message', {
												  'user': $itemInfo.buyer,
												  'message': $itemInfo.purchase.message
												  }) }}" />
			<xf:else />
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y', {
												  'user': $itemInfo.buyer
												  }) }}" />
			</xf:if>
		<xf:else />
			<xf:set var="$title_extra" value="" />
		</xf:if>
		<a href="{{ link('dbtech-shop/item', {'id': $itemInfo.purchase.itemid, 'title': $itemInfo.purchase.title}, {'shopid': $itemInfo.purchase.shopid}) }}" data-xf-click="overlay"><img src="{$itemInfo.purchase.icon}" alt="{$itemInfo.purchase.title}" title="{$itemInfo.purchase.title}:  {$itemInfo.purchase.description|raw}" style="padding:1px;" /></a>
	</xf:foreach>	
</xf:if>
</div>
<label for={$post.post_id}> Способности</label>

document.getElementById("hidden") - и если следующие темы имеют такие же элементы с этим id, то причина в этом, id должно быть уникально.

Окей, ясно, но как это исправить?

Ну как:

а) каждый div имеет свой id, а кнопки передают в функцию (обработчик) их id

б) отказаться от id вообще, а обработчик в общем родителе для кнопки и div ищет div и выполняет операцию.

Выбирайте.