JSFiddle - React, Tailwind, and code Playground

by mrmayfield

HTML

<div class="super">
    <div id="grabbed" class="fred">First</div>
    <div id="grabbed" class="fred">Second</div>
    <div id="grabbed" class="fred">Third</div>
    <div id="grabbed" class="fred">Fourth</div>
    <div id="grabbed" class="fred">Fifth</div>
    <div id="grabbed" class="fred">Sixth</div>
    <div id="grabbed" class="fred">Seventh</div>
    <div id="grabbed" class="fred">Eight</div>
    <div id="grabbed" class="fred">Ninth</div>
    <div id="grabbed" class="fred">Tenth</div>
    <div id="grabbed" class="fred">Eleventh</div>
    <div id="grabbed" class="fred">Twelfth</div>
</div>
    
<br>

<div class="super">
    <div class="fred">Hello</div>
    <div class="fred">Hello</div>
    <div class="fred">Hello</div>
</div>
    
    
    <div class="grabbed hidden">Jack Div</div>

CSS

.grabbed{
   display: inline;
   background-color: blue;
}

.hidden{
    display: none;
}

JavaScript

function findEndIndex(n){
if(n > 0)
        return Math.ceil(n/multiple) * multiple;
    else if( n === 0)
        console.log("shouldn't be 0");
    else
        return multiple;
}

var fred = $('.super');
<!-- console.log( fred.first().children().eq(2).text() );
 -->
$('.fred').click(function(){
    var id = $(this).attr('id');
    console.log(id);
    multiple = 3;
    var index = ( $(this).index() ) + 1;
    var value = findEndIndex(index) - 1;    
    var endNode = ( $(this).parent().children('.fred').eq(value) );
    
    endNode.after($('.' + id));
    $('.' + id).removeClass('hidden');
    
    
});