JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tbl">
  <th>
    Product Detail Display
  </th>
  <tr>
    <td> ----- Product A -----</td>
  </tr>
    <tr class="occult">
    <td> ----- Product B ----- </td>
  </tr>
    <tr class="occult">
    <td> ----- Product C ----- </td>
  </tr>
    <tr class="occult">
    <td> ----- Product D ----- </td>
  </tr>
  <tr>
    <td>
      <div class="left">Total: 4 Product(s)</div>
      <div id="more" class="right"><button>View More Products</button></div>
      <div id="less" class="right occult"><button>View less Products</button></div>
    </td>
  </tr>
</table>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

CSS

tr{
  text-align:center;
}

.left{
  width:50%;
  float:left;
}
.occult{
  display:none;
}
.right{
  width:50%;
  float:right;
  text-align: right;
}

JavaScript

$('#more').on('click',function(){
	$("#tbl tr.occult").show();
  $(this).hide();
  $('#less').show();
});

$('#less').on('click',function(){
	$("#tbl tr.occult").hide();
  $(this).hide();
  $('#more').show();
});