如何切换从AJAX获取的数据？

Question

I have this code in which I am trying to show and hide the data on clicking a product number and the data is being fetched from database through AJAX. I want the data to be shown beneath the desired row. I want to put the data in tbody and show it on clicking its product number.

if (mysqli_num_rows($result) > 0)
{

    while($row = mysqli_fetch_assoc($result))
    {
        ?>
        <tr><td  align="center"><?php  echo $row['FONumber']; ?></td></tr>
        <tbody id='sd'<?php echo $p; $p++; ?>></tbody>
    <?php }
}

Javascript and AJAX:

$(function(){
    $('#hover1').on({
        mouseenter:function(){$(this).css("background","grey")},
        mouseleave:function(){$(this).css("background","white")}},'tr');

});

// number of tds
var c = $('#hover1').find('td').length;

var id = document.getElementById("hover1");

for(var i = 0; i < c; i++){

    id.rows[i].onclick=(function(){
        var a = $(this).find('td:eq(0)').text();
        $.ajax({
            url: 'printpo1.php',
            type: 'post',
            data: {fo:a},
            success: function(data){
                $('#name').html(data);
            }
        });
        $('#sd'+i).toggle();
        alert('#sd'+i);
    });  
}

So far the data I am trying to fetch is showing in the tbody of the first row. Any help will be really appreciated.