JSFiddle - React, Tailwind, and code Playground

by jahrichie

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.1.1/css/foundation.css">
<table>
  <tbody><tr>
    <th>Testimonial Type</th>
    <th>Title</th>
    <th>Display Quote</th> 
    <th>Catalog Item</th>
    
    <th>show</th>
    <th>edit</th>
    <th>delete</th>

  </tr> 
  </tbody><tbody id="endorsement-sorting" data-update-url="/sort_endorsements" class="ui-sortable">
      <tr id="endorsement_2" data-col-int="6">
        <td style=""><span class="handle">full</span></td>
        <td>Test large</td>
        <td>test large</td>
        <td>Coffee with Apple CEO Tim Cook at Apple Headquarters in Cupertino</td>
       
        <td><a href="/endorsements/2">Show</a></td>
        <td><a href="/endorsements/2/edit">Edit</a></td>
        <td><a href="/endorsements/2" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a></td>
      </tr>
      <tr id="endorsement_1" data-col-int="6">
        <td style=""><span class="handle">full</span></td>
        <td>Large</td>
        <td>Killing it</td>
        <td>Coffee with Apple CEO Tim Cook at Apple Headquarters in Cupertino</td>
       
        <td><a href="/endorsements/1">Show</a></td>
        <td><a href="/endorsements/1/edit">Edit</a></td>
        <td><a href="/endorsements/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a></td>
      </tr>

      <tr id="endorsement_4" data-col-int="6">
        <td style=""><span class="handle">full</span></td>
        <td>Large</td>
        <td>Killing it</td>
        <td>Coffee with Apple CEO Tim Cook at Apple Headquarters in Cupertino</td>
       
        <td><a href="/endorsements/1">Show</a></td>
        <td><a href="/endorsements/1/edit">Edit</a></td>
        <td><a href="/endorsements/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a></td>
      </tr>


      <tr id="endorsement_1" data-col-int="6">
        <td style=""><span class="handle">full</span></td>
        <td>Large</td>
       ...

CSS

.testi-sep td,
.testi-sep th{
  border-bottom: 10px solid black !important;
}

JavaScript

alert("yes")

var rows   = $("#endorsement-sorting tr"),
    total  = 0;    


rows.each(function(){
  var colSize  = $(this).data("col-int");
  total  += colSize; 
    
  console.log(total)
  if ( total == 12  ){
    total = 0
    $(this).addClass("testi-sep")

  }

});