JSFiddle - React, Tailwind, and code Playground

HTML

<!-- как посчитать все типи отделно? -->
<div id="wrapper">
  <div class="innerElemType1">1</div>
  <div class="innerElemType1">2</div>
  <div class="innerElemType1">3</div>
  <div class="innerElemType1">4</div>
  <div class="innerElemType1">5</div>
  <div class="innerElemType2">1</div>
  <div class="innerElemType2">2</div>
  <div class="innerElemType2">3</div>
  <div class="innerElemType3">1</div>
  <div class="innerElemType3">2</div>
  <div class="innerElemType3">3</div>
  <div class="innerElemType3">4</div>
</div>
<button id="btn1">Type1</button>
<button id="btn1">Type2</button>
<button id="btn2">Type3</button>

<div class="results">
<div id="result1">Type1 Result</div>
<div id="result1">Type2 Result</div>
<div id="result2">Type3 Result</div>
</div>

CSS

#wrapper {
  width: 10rem;
  background: yellow;
  margin-bottom: 1rem;
}

#btn {
  width: 10rem;
}

.results {
  display: flex;
  justify-content: space-between;
}

JavaScript

let type1 = document.querySelectorAll('#wrapper .innerElemType1'),
btn1 = document.querySelector('#btn1');

let type2 = document.querySelectorAll('#wrapper .innerElemType2'),
btn2 = document.querySelector('#btn2');

let type3 = document.querySelectorAll('#wrapper .innerElemType3'),
btn3 = document.querySelector('#btn3');

btn1.onmouseover = (event) => {
	result1.innerHTML = type1.length
}