JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name='product_CD' type="checkbox" />
<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">
        <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>

CSS

#hiddenRow {
  display: none;
}
.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; 
}

#hiddenRow.show{
  display: table-row;
}

JavaScript

$("input[name='product_CD']").on("click", function() {
  $("#hiddenRow").toggleClass('show');
});