使用jquery显示/隐藏div值

I have two tables which are related to each other using a common column called invoice_no. What I want to is something like this:-

To Show the data from one table at first like-> image 1

And then to Show Data Like This from second table When a user clicks VIEW button like-> image 2

How can i toggle the data from second table on click of the button VIEW in each rows of the table and not show them all at once, by using jquery..

Here's my code i have been using to view all the data at once:-

<?php

$mysqli= new mysqli("localhost","root","","store_records");
if($mysqli->connect_error)
die("Database connection failed ".$mysqli->connect_error);

$query_details = "select DATE_FORMAT(date, '%d-%m-%Y') as date, ID, invoice_no, balance, sub_total, vat_tax, grand_total from bill_details ORDER BY DATE_FORMAT(date, '%m-%d-%Y') DESC";
$result_details = $mysqli->query($query_details);
echo"<table id='products_table' border='1'>";
echo "<tr><th>Date</th><th>Invoice No</th><th>Balance</th><th>Sub Total</th><th>ADD V.A.T Tax</th><th>Grand Total</th></tr>";
while($row_details = $result_details->fetch_assoc())
{

echo "<tr><td>".$row_details['date']."</td><td>".$row_details['invoice_no']."</td><td>".$row_details['balance']."</td><td>".$row_details['sub_total']."</td><td>".$row_details['vat_tax']."</td><td>".$row_details['grand_total']."</td><td><input type='button' id='viewdetails' value='View'></td></tr>";

$query_records = "select * from bill_records where invoice_no='".$row_details['invoice_no']."'";
$result_records = $mysqli->query($query_records);
echo "<td colspan='15'>";
echo "<table border='1' width='100%'>";
echo "<tr><th>Item Name</th><th>Quantity</th><th>Pack</th><th>Batch</th><th>Expiry</th><th>M.R.P</th><th>Rate</th><th>VAT</th><th>DIS.</th><th>Amount</th></tr>";
while($row_records = $result_records->fetch_assoc())
{

echo "<tr><td>".$row_records['item_name']."</td><td>".$row_records['qty']."</td><td>".$row_records['pack']."</td><td>".$row_records['batch']."</td><td>".$row_records['expiry']."</td><td>".$row_records['mrp']."</td><td>".$row_records['rate']."</td><td>".$row_records['vat']."</td><td>".$row_records['discount']."</td><td>".$row_records['amount']."</td></tr>";

}
echo "</table>";
echo "</td>";
echo"</tr>";
}
echo "</table>";
?>

Thanking you for your help :)

You will need to work with unique ids, in this case you can use the invoice_no field. If you define that unique id to the field you're using to show the field you are able to show them 1 by 1. You can see a simple example below, this example is using smarty variables.

<style>
.hide {
    display: none;
}
</style>

{foreach $items as $item}
    <div class="block">
        <button id="button-{$item.id}">Show Field</button>
        <div class="hide" id="block-{$item.id}">
            Content {$item.id}
        </div>
    </div>
{/foreach}

<script type="text/javascript">
    $('[id^="button-"]').click(function () {
        var id_parts = $(this).attr('id').split('-');
        $('#block-' + id_parts[1]).fadeIn();
    });
</script>