[ Foro de Javascript ]

Problemas para individualizar un elemento que es parte de un array

Tengo el siguiente código:
var cards = ''

if(productos.length) {
   for(var i=0; i<productos.length; i++) {
       cards +=
           '<section>' +
               '<h3 class="mostrar" onclick="verCard()">'+ productos[i].nombre  +'</h3>' +
               '<img src="' + productos[i].foto + '" alt="">' +
               '<div class="ocultar">'+
               '<p><b class="precio">Precio:</b> $'+ productos[i].precio +
               '<p><b>Stock:</b> '+ productos[i].stock +'</p>' +
               '<p><b>Marca:</b> '+ productos[i].marca +'</p>' +
               '<p><b>Categoría:</b> '+ productos[i].categoria +'</p>' +
               '<p><b>Detalles:</b> '+ productos[i].detalles +'</p>' +
               '<p><b>Edad desde:</b> '+ productos[i].edadDesde +'</p>' +
               '<p><b>Edad hasta:</b> '+ productos[i].edadHasta +'</p>' +
               '<p><b>Más info:</b> '+ productos[i].descripcionLarga +'</p>' +
               '<br>' +
               '<p><b style="color:black;">Envío sin cargo:</b> '+ (productos[i].envio? 'Si':'No') +'</p>' +
               '<button><b>Comprar</b>' +'</div>' + '</button>' +
           '</section>'
   }
}
else cards += '<h2>No se encontraron productos para mostrar</h2>'

document.querySelector('.cards-container').innerHTML = cards

var mostrarCards = document.getElementsByClassName('ocultar');

function verCard() {
   
   for (var i = 0; i < mostrarCards.length; i++) {
       
       mostrarCards[i].style.backgroundColor = 'red';}
}



El problema es que yo necesito que al hacer click sobre el h3 con clase mostrar se cambie el color de fondo del div con clase ocultar. Pero al hacerlo no solo me modifica el div actual sino el resto de los div inyectados en el HTML desde JS. ¿Cómo podría hacer para que al hacer click solo se modifique el que yo estoy clickeando?