如何根据左div值显示右div？

Question

我有两个Div并排。在左div中，我有一个从数据库填充的表。在第二个div中，我需要为左div的每个表条目显示一些子类别。 如果有人单击表格的任何行（在图标上），则必须在右侧div中显示相应的子类别（不加载页面）。

先谢谢了。我正在使用flask框架。

<div class="card" style="width:50%;float: left;">
  <div class="card-body">
      <h5>Main Task</h5>
 <div class="table-responsive">
          <table class="table">
              <thead>
                  <tr>
                      <th>#</th>
                      <th>TASK#</th>
                      <th>Task Name</th>
                      <th>Prefix</th>
                  </tr>
              </thead>
              <tbody>
                 <tr>
                  <td>{{ ns.num }}</td>
                  {% for i in range(task|count) %}
                      <td>{{ task[i] }}</td>
                      {% endfor %}
                      </tr>
                    {% set ns.num = ns.num+1 %}
                 {% endfor %}
              </tbody>
          </table>
      </div>
  </div>
</div>
                            
    
<div class="card" style="width:49%;float: right;">
    <div class="card-body">
        <h5>Sub Task</h5>
   <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Sub task#</th>
                        <th>Task Name</th>
                        <th></th>

                    </tr>
                </thead>
                <tbody>
                   <tr></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>