JSFiddle - React, Tailwind, and code Playground

HTML

<li class="item">
    <div class="quickview-btn" data-pid="147" style="opacity: 0;">Quick View</div>
<a class="product-image" title="xyz" href="http://def.com/xyz"><img alt="xyz" src="http://def.com/asdf">xyz</a>

    
<h2 class="product-name"><a title="xyz" href="http://def.com/xyz">22" Syncmaster LCD Monitor</a></h2>

    <div class="price-box">something</div>
</li>
<li class="item">
    <div class="quickview-btn" data-pid="163" style="opacity: 0;">Quick View</div>
<a class="product-image" title="abc" href="http://def.com/abc"><img alt="abc" src="http://def.com/ghjk">abc</a>

    
<h2 class="product-name"><a title="abc" href="http://def.com/abc">Another Product</a></h2>

    <div class="price-box">something</div>
</li>

CSS

#accountIcon {
    position:relative;
    height:58px;
    width:80px;
    cursor:pointer;
    background-color:#000;
}
#accountPopup {
    position:absolute;
    top:58px;
    width:400px;
    height:200px;
    background-color:#CCC;
    display:none;
}

JavaScript

$('.quickview-btn').on('click', function () {
    var pid = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');

    console.log(pid);
})