JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="one-third">
    <article class="post post-1320">post-1320</article>
</div>
<div class="one-third">
    <article class="post post-1321">post-1321</article>
</div>
<div class="one-third" style="display:none;">
    <article class="post post-1322">post-1322</article>
</div>
<div class="one-third" style="display:none;">
    <article class="post post-1323">post-1323</article>
</div>
</div>
<div class="wrapper">

<div class="one-third">
    <article class="post post-1324">post-1324</article>
</div>
<div class="one-third">
    <article class="post post-1325">post-1325</article>
</div>
<div class="one-third">
    <article class="post post-1326">post-1326</article>
</div>
</div>

<div class="clear"></div>

CSS

.one-third {
    width:33.3333333333333%;
    float:left;
}

.post {
    background:red;
    margin:5px;
    padding:5px;
    cursor:pointer;
}

.clear {clear:both;}

JavaScript

$('.post').click(function() {
    var str = $(this).attr('class');
    var unqiuePostClass = str.split(" "); // unqiuePostClass[1] returns post-xxxx
    
    var result = $('.'+unqiuePostClass[1]).parent().siblings('.one-third:visible').addBack();

	console.log($(this).parents('.wrapper').parent('.one-third').index('div.one-third:visible'));
    
});