隐藏的表行未显示正确的信息

我对Javascript有一些问题。我有一个表格，显示了员工根据客户名称进行搜索时客户的基本信息。当员工单击"查看销售历史记录"时，将显示特定客户销售历史记录的隐藏表行。

当我将css显示更改为"table row"时，显示所有从搜索中返回的客户的销售历史记录没有问题。然而，每当我隐藏表行并包含显示隐藏行的javascript时，它只会显示第一个客户的销售历史。

到目前为止，我一直在努力做到这一点，希望有人能帮助我。

while($row = mysql_fetch_assoc($result)) {
     $id = $row["id"];
     $cfname = $row["f_name"];
     $clname = $row["l_name"];
     $cemail = $row["email"];
     $ccompany = $row["company_name"];
     $year = $row["year"];
     $product = $row["product"];
     $employee = $row["employee"];
     $status = $row["status"];
     echo '<tr>
            <td>'.$cfname.' '.$clname.'</td>
            <td>'.$cemail.'</td>    
            <td>'.$ccompany.'</td>      
            <td> <h4 id="vsalesHistory" onclick="vsalesHistory()">View Sales History</h4></td>
            </tr>';
     echo '<thead id="salesHistoryHead">
            <tr>
             <th>Date of Sales</th>
             <th>Type of Product</th>
             <th>Previous Sales Manager</th>
             <th>Job Status</th>
            </tr>
            </thead>';
    echo '<tr id="salesHistory">
            <td>'.$year.'</td>
            <td>'.$product.'</td>
            <td>'.$employee.'</td>
            <td>'.$status.'</td>
        </tr>';
}
echo '</table>';

这是我的JS脚本

function vsalesHistory(){
    var e = document.getElementById('salesHistoryHead');
    var f = document.getElementById('salesHistory');
    if(e.style.display == 'table-row'){
        e.style.display = 'none';
    }else{
        e.style.display = 'table-row';
        }
    if(f.style.display == 'table-row'){
        f.style.display = 'none';
    }else{
        f.style.display = 'table-row';
        }
}