JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="item">
        <div class="quickview-btn" data-pid="147">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>
</ul>

JavaScript

$('li:first-child').find('.quickview-btn').on('click', function () {
    var nextData = $(this).parent().next().children('.quickview-btn').data('pid');
    console.log(nextData);
});