JSFiddle - React, Tailwind, and code Playground
HTML
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div class="container" id="container">
<table class="gridtable" id="tableMain">
<thead>
<tr class="tableheader">
<th>customer</th>
<th>product</th>
<th>thedate</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 03</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
</tbody>
</table>
</div>
JavaScript
$( document ).ready(function() {
$('#tableMain tr.breakrow').on('click',function(){
alert('toggle');
});
});