JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table class="kp">
        <tr class="toekomst">
            <td >2 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
        <tr class="toekomst">
            <td >3 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
        <tr class="toekomst">
            <td >3 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
        <tr class="active">
            <td>kostenplaats 1</td>
            <td >1 active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td> + </td>
        </tr>
        <tr class="verleden">
            <td >4 verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td></td>
        </tr>
        <tr class="verleden">
            <td>5 verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td></td>
        </tr>
        <tr class="verleden">
            <td >6 verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td>verleden</td>
            <td></td>
        </tr>
    </table>
    <table class="kp">
        <tr class="toekomst">

            <td >2 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
        <tr class="toekomst">
            <td >3 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
        <tr class="toekomst">
            <td >3 toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td>toekomst</td>
            <td> - </td>
        </tr>
     ...

CSS

table{ margin:5px; border-collapse:collapse; width: 600px;}
/* default table cell styling */
th, td {
    border:1px solid #000;
    padding: 5px;
    vertical-align: top;
    text-align: left;
}
.active{background: Aquamarine;}
.toekomst{background: lightCyan;}
.verleden{background: #f4f4f4;}

JavaScript

$(document).ready(function(){
    $('.kp').each(function(index) {
        var rowCount = $('.kp:eq('+index+') tr').length;
        var activeIndex = $('.active').eq(index).index();
        $('.kp:eq('+index+')').find('tr:gt(' + (activeIndex) + ')').hide();
        $('.kp:eq('+index+')').find('tr:lt(' + (activeIndex) + ')').hide();
        var toekomst = $('.kp:eq('+index+') .toekomst').length;
        var verleden = $('.kp:eq('+index+') .verleden').length;                    
        $('<td rowspan="'+ toekomst +'" class="active"></td>').insertBefore('.kp:eq('+index+') .toekomst:eq(0) td:eq(0)');

        $('<td rowspan="'+ verleden +'" class="active"></td>').insertBefore('.kp:eq('+index+') .verleden:eq(0) td:eq(0)');

        $('<td rowspan="'+ toekomst +'">toekomst</td>').insertBefore('.kp:eq('+index+') .toekomst:eq(0) td:eq(1)');
        $('<td rowspan="'+ verleden +'">verleden</td>').insertBefore('.kp:eq('+index+') .verleden:eq(0) td:eq(1)');   
        $('<td>active</td>').insertBefore('.kp:eq('+index+') .active:eq(0) td:eq(1)');      
        
    });
    $('.active').bind('click',function() {
        var closetKP = $(this).closest('.kp');
        $('.toekomst',closetKP).toggle('fast', function() {});
        $('.verleden',closetKP).toggle('fast', function() {});
    });

});