Why set display: block when onmouseover via for loop on all elements, no only one? - for-loop

Question

var priceListItem = document.getElementsByClassName("priceListItem");
var priceListItemCirclePrice = document.getElementsByClassName("priceListItemCirclePrice");
for(var i = 0; i < priceListItem.length; i++){
priceListItem[i].onmouseover = funckiaNefunkcia;
function funckiaNefunkcia(){
for(var a = 0; a < priceListItemCirclePrice.length; a++){
priceListItemCirclePrice[a].style.display = "block";
}
};
priceListItem[i].onmouseout = funckiaNefunkciaLeave;
function funckiaNefunkciaLeave(){
for(var a = 0; a < priceListItemCirclePrice.length; a++){
priceListItemCirclePrice[a].style.display = "none";
}
}
}
<div id="priceList">
<div class="container">
<div id="sectionName">Cenník</div>
<div class="row text-center" id="priceLists">
<div class="col-md-3 priceListItem">
<div class="priceListItemTop">
<h4>Strih dlhé vlasy</h4>
</div>
<div class="priceListItemBottom">
<ul style="text-align: left">
<li>strih podľa požiadavky</li>
<li>umytie vlasov</li>
<li>vlasová kozmentika</li>
<li>procedúry</li>
</ul>
</div>
<div class="priceListItemCirclePrice">
<p>30 EUR</p>
</div>
</div>
<div class="col-md-3 priceListItem">
<div class="priceListItemTop">
<h4>Strih krátke vlasy</h4>
</div>
<div class="priceListItemBottom">
<ul style="text-align: left">
<li>strih podľa požiadavky</li>
<li>umytie vlasov</li>
<li>vlasová kozmetika</li>
<li>procedúry</li>
<li>farbenie vlasov</li>
</ul>
</div>
<div class="priceListItemCirclePrice">
<p>40 EUR</p>
</div>
</div>
<div class="col-md-3 priceListItem">
<div class="priceListItemTop">
<h4>Spoločenské príležitostné účesy</h4>
</div>
<div class="priceListItemBottom">
<ul style="text-align: left">
<li>strih podľa požiadavky</li>
<li>umytie vlasov</li>
<li>vlasová kozmentika</li>
<li>doplnky do vlasov</li>
</ul>
</div>
<div class="priceListItemCirclePrice">
<p>50 EUR</p>
</div>
</div>
<div class="col-md-3 priceListItem">
<div class="priceListItemTop">
<h4>Individuálne požiadavky</h4>
</div>
<div class="priceListItemBottom">
<ul style="text-align: left">
<li>strih podľa požiadavky</li>
<li>umytie vlasov</li>
<li>vlasová kozmentika</li>
<li>procedúry</li>
<li>farbenie vlasov</li>
<li>doplnky do vlasov</li>
<li>iné požiadavky</li>
</ul>
</div>
<div class="priceListItemCirclePrice">
<p>70 EUR</p>
</div>
</div>
</div>
</div>
</div>
Element by class name priceListItemCirclePrice is display: none, I want to set display: block after onmouseover on priceListItem. Now when I do onmouseover on the priceListItem it show all priceListItemCirclePrice, on all 4 elements.
I need to change style to display: block on only one element - I´m currently mouseover.
Thank you