JSFiddle - React, Tailwind, and code Playground

HTML

<div id="record-12" class="single-record">
        <div class="product" data-record="1"></div>
</div>
<div id="record-13" class="single-record">
        <div class="product" data-record="2"></div>
</div>
<div id="record-14" class="single-record">
        <div class="product" data-record="1"></div>
</div>

<div id="product-id-1">Product 1 </div>
<div id="product-id-2">Product 2 </div>
<div id="product-id-3">Product 3 </div>
<div id="product-id-4">Product 4 </div>
<div id="product-id-5">Product 5 </div>
<div id="product-id-6">Product 6 </div>
<div id="product-id-7">Product 7 </div>
<div id="product-id-8">Product 8 </div>

JavaScript

$(function(){
    var obj ={};
    $.each($('.single-record .product'), function(index, item) {
        var record = $(item).data('record');
        if ($('#product-id-'+record).length > 0) obj[record] = $('div[data-record="'+record+'"]').length;
    });
    $.each(obj,function(i, el){
        $('#product-id-'+i).append('('+el+')');
    });
});