Есть 3 таблицы, нужно скрывать в каждой часть информации, по нажатию показывать скрытую часть.
Пример одной из таблиц:
<div class="building-specifications">
<table class="building-specifications__table">
<tbody>
<tr class="building-specifications-itm">
<td class="building-specifications-itm__caption">Адрес</td>
<td class="building-specifications-itm__value">Ул. Пушкина</td>
</tr>
<tr class="building-specifications-itm">
<td class="building-specifications-itm__caption">Дом</td>
<td class="building-specifications-itm__caption">Колотушкина</td>
</tr>
<tr class="building-specifications-itm">
<td class="building-specifications-itm__caption">Подъезд</td>
<td class="building-specifications-itm__value">1</td>
</tr>
<tr class="building-specifications-itm">
<td class="building-specifications-itm__caption">Квартира</td>
<td class="building-specifications-itm__value">1</td>
</tr>
</tbody>
</table>
<button type="button" class="btn building-specifications__btn-show">Показать все характеристики</button>
</div>
(в ссылке на codepen полный вариант)
В примере показана проблема - вместо того чтобы в каждой таблице показывать по 2 поля, показывает 2 поля только в первой таблице, в остальных скрывает.
ссылка на пример:
https://codepen.io/maksimlavrenyuk/pen/vvLvRg
Я понимаю, что т.к. я использую такую конструкцию:
$('.building-specifications-itm:gt('+SpecificationsItmShow +')').hide();
скрываются все элементы с .building-specifications-itm, кроме тех, которые обозначены в gt().
Не понимаю как производить проверку количества позиций отдельно для каждой таблицы