Auto Populate dropdowns in a <table>

Auto Populate dropdowns in a <table>

Hi,

I have a table tableSearch in a page, rows can be added and deleted by the buttons on each row. the 1st dropdown ( ddlType) drives the value of the 2nd dropdown (ddlSearch) on each row. The show and hide of the ddlSearch works fine by referencing $(this).closest('tr').find('.ddlSearch'). However after calling the webservice, populating the dropdown doesn't work (please see the red script below). Is there anything done incorrectly? The script works fine if the dropdown ddlSearchASP is not in the table(as seen below) , I used almost the same script except populating it with (which was just resolved in the other post)
    $(".ddlSearchASP").append($("<option></option>").val(value.FID).html(value.FName));   

Is that something to do with the name as the dropdown's name is same on each row?
Please advice. Your help would be greatly appreciated!

Code:
<script>
function ShowHide() {
            $('.ddlType').change(function () {
                switch ($(this).val()) {
                    case "Business Unit":
                    case "Department":
                        $(this).closest('tr').find('.ddlSearch').show();                      
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            //url is the path of our web method (Page name/function name)
                            url: "/WebServices/myWebservices.asmx/PopulateSearchDropDownList",                            
                            data: "{}",
                            dataType: "json",
                            //called on jquery ajax call success
                            success: function (result) {
                                alert('Success');
                                
                                $(this).closest('tr').find('.ddlSearch').empty();
                                $.each(Result.d, function (key, value) {
                                    $(this).closest('tr').find('.ddlSearch').append($("<option></option>").val(value.FID).html(value.FName));
                                });

                            },
                            //called on jquery ajax call failure
                            error: function ajaxError(result) {
                                alert('Failed');
                                alert(result.status + ' : ' + result.statusText);
                            }
                        });
                        break;
                    default:
                        $(this).closest('tr').find('.ddlSearch').hide();

                        break;
                }

            });
        }
</script>
    <table id="tableSearch">
        <tr>
            <td>
               <asp:DropDownList ID="ddlType" CssClass="ddlType" runat="server">
               <asp:ListItem Value="0"  Text=""></asp:ListItem>
                <asp:ListItem Value="Name">Name</asp:ListItem>
                <asp:ListItem Value="Business Unit">Business Unit</asp:ListItem>
                <asp:ListItem Value="Department">Department</asp:ListItem>                
            </asp:DropDownList>
            </td>          
            <td>
                <asp:DropDownList ID="ddlSearch" CssClass="ddlSearch" runat="server">
                </asp:DropDownList>               
            </td>
            <td>
                <a href="#" class="Add">Add</a>
            </td>
            <td>
                <a href="#" class="Delete">Delete</a>
            </td>
        </tr>
    </table>
     <asp:DropDownList ID="ddlSearchASP" CssClass="ddlSearchASP" runat="server"> </asp:DropDownList>