如何实现点击HTML表格指定单元格后显示第二个隐藏表格的功能

我想要实现与下述示例完全一致的效果：
当用户点击783时

会显示第二个HTML表格

以下是我当前使用的表格代码，我希望当点击32或者其他灰色背景的数值时，能够展示一个包含两列的HTML表格。

<table class="table table-striped" style="width:100%; text-align: center;">
   <thead>
      <tr>
         <th scope="col" style="width: 4%; ">LABEL </th>
         <th scope="col" style="width: 9%; ">LABEL </th>
         <th scope="col" style="width: 9%; ">LABEL </th>
         <th scope="col" style="width: 5%; ">LABEL </th>
         <th scope="col" style="width: 10%; ">LABEL </th>
         <th scope="col" style="width: 14%; background-color: #dee2e657; ">LABEL </th>
         <th scope="col" style="width: 10%;">LABEL </th>
         <th scope="col" style="width: 5%; ">LABEL </th>
         <th scope="col" style="width: 9%;">LABEL </th>
         <th scope="col" style="width: 9%; ">LABEL </th>
      </tr>
   </thead>
   <tr>
      <td scope="col" style="width: 4%; ">10</td>
      <td scope="col" style="width: 9%; ">30</td>
      <td scope="col" style="width: 9%; ">58</td>
      <td scope="col" style="width: 5%; ">11</td>
      <td scope="col" style="width: 10%; ">17</td>
      <td scope="col" style="width: 12%; background-color: #dee2e657;">32</td>
      <td scope="col" style="width: 10%; ">44</td>
      <td scope="col" style="width: 5%; ">20</td>
      <td scope="col" style="width: 9%; ">10</td>
      <td scope="col" style="width: 9%; ">11</td>
   </tr>
   <tr>
      <td scope="col" style="width: 4%; ">20</td>
      <td scope="col" style="width: 9%; ">40</td>
      <td scope="col" style="width: 9%; ">18</td>
      <td scope="col" style="width: 5%; ">31</td>
      <td scope="col" style="width: 10%; ">27</td>
      <td scope="col" style="width: 12%; background-color: #dee2e657;">47</td>
      <td scope="col" style="width: 10%; ">25</td>
      <td scope="col" style="width: 5%; ">21</td>
      <td scope="col" style="width: 9%; ">90</td>
      <td scope="col" style="width: 9%; ">51</td>
   </tr>
</table>

内容的提问来源于stack exchange，提问作者almokhadi