JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="orderTotal">
   <h4>Order Total:</h4>

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id='hiddenRow' class="hidden">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>
 
 <button id='toggle' class='btn btn-primary'>
Toggle
</button>

CSS

.orderTotal {
  padding: 10px;
  background-color: #fdfbe4;
  width: 95%;
  margin: 0 auto;  
}
.orderTotal h4 {
  font-weight: bold;   
}
.totalOrder {
  color: #ee7a23;
  font-weight: bold;
  font-size: 18px; 
}
.totalAmount {
  font-weight: bold;
  font-size: 18px; 
}

JavaScript

$("#toggle").on("click", function() {
    $("#hiddenRow").toggleClass("hidden");
});