Показать скрыть несколько блоков по одинаковым классам
 

Добрый день!

На сайте имеется около ста одинаковых блоков DIV в виде таблицы.
Необходимо, если есть блоки с одинаковыми классами, например:

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_honor">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

сгруппировать блоки по одинаковым классам и скрыть все, кроме первых. В оставшемся блоке показывать кнопку показать, скрыть n элементов.

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible">Показать 2 элемента</span></div> <!-- Добавляется кнопка -->
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_honor">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

Возможно ли доработать этот код. Он показывает и скрывает блоки с классом content.

document.addEventListener("DOMContentLoaded", function() {
    const on = (parent, event, selector, handler) =>
    parent.addEventListener(event, ({target}) => {
        if (target = target.closest(selector)) handler(target)
    })
    const fn = el => {
        let parent = el.closest('.conteiner');
        let content = parent.querySelector('.content');
        content.style.setProperty('--maxH', `${content.scrollHeight}px`);
        parent.classList.toggle('active');
    }
    on(document, "click", ".collapsible", fn);
});

Помогите пожалуйста.

задача из разряда: пойди туда, незнамо куда.