JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
</div>

CSS

article {
    float:left;
    width:30%;
    height:40px;
    background:DeepSkyBlue;
    margin:5px;
}

JavaScript

jQuery(document).ready(function ($) {

    $('.container > article:visible:nth-child(3n)').after('<div class="receptacle"></div>');

    $('article').each(function () {
        $(this).on('click', function () {
            $(this).nextAll('receptacle').text('toto');
        });
    });

});