JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div class="container">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
</div>

CSS

article {
    display: inline-block;
    width:30%;
    height:40px;
    background:DeepSkyBlue;
    margin:5px;
}
.receptacle {
    min-height: 40px;
    background-color: lightgreen;
    clear: both;
}

JavaScript

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

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

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

});