Binding the results of a clicked row inside a table into another row in another table

[zymoxum]

I have a table a search link as one of it's columns. when i click on search, an ajax popup extender panel pops up with a search box option. the search is done through a webservice call and the results are binded in a table inside the panel. I made the table rows clickable and i want the clicked row to be binded to the first table. The problem i'm having is keeping track of each row. When i click a row inside the panel, all rows in the first table are binded instead of just that one row. I can't figure out how to keep track of which row i clicked.Any help is really appreciated, I've been struggling with this for days. Here is my code: JavaScript\[code\] $(document).ready(function () { MyAccountModel = new AccountViewModel() ko.applyBindings(MyAccountModel ); }) var passedmodel; var MyAccountModel; var AccountViewModel = function () { var self = this; self.model = {}; self.invoice = ko.observableArray([new invoice()]); //Ajax Call to search accounts (working and binding fine) self.GetAccounts = function () { var searchstring = document.getElementById("<%=txtaccountsearch.ClientID %>").value; var DTO = { 'searchstring': searchstring }; var AccountURL = "ajaxwebservicecalls.asmx/GetAccount"; $.ajax({ type: "Post", url: AccountURL, data: JSON.stringify(DTO), contentType: "application/json; charset=utf-8", dataType: "json", success: function add(msg) { passedmodel = ko.mapping.fromJS(msg.d); MyMasterviewModel.MyAccountModel.invoice(passedmodel); }, error: ONAccountFailure }); } function ONAccountFailure(xhr, ex) { alert(xhr.responseText); } self.CurrentDisplayAccount = ko.observableArray([new CurrentDisplayAccount()]) //this is to select a row inside the panel self.selectAccount = function (item) { self.CurrentDisplayAccount(item); };\[/code\]HTMLI will not show the Popup Extender/Panel code to save space. Here are the knokcout table bindings\[code\] <table id="Table3"> <tr> <th> Account Code </th> <th> Description </th> <th> Account Type </th> <th> Purpose </th> </tr> <tbody data-bind="foreach:MyAccountModel.invoice().GLAccounts"> <tr data-bind="click: MyMasterviewModel.MyAccountModel.selectAccount"> <td data-bind=" text: $data.FormattedGLAccount"></td> <td data-bind="text: $data.GLAccountDescription"></td> <td data-bind="text: $data.GLAccountTypeName" ></td> <td data-bind="text: $data.GLAccountLongDescription" ></td> </tr> </tbody> </table> \[/code\]Now whenever i click on any row of the above table, the results are binded to both row on the below table. However, I just want it to be binded to the row where i clicked search from. \[code\] <td align="left"> <table border="0" cellspacing="0" cellpadding="0"> <th> Account </th> <th> Amount </th> <th> Reference </th> <th> Description </th> <tbody databind="foreach: MyAccountModel.CurrentDisplayAccount()" > <td > <input data-bind="text: $data.FormattedGLAccount" /> </td> <td ><input data-bind="text:$data.GLAccountDescription"/> </td> <td ><input data-bind="text: $data.GLAccountTypeName" /> </td> <td ><input data-bind="text: $data.GLAccountLongDescription" /> </td> <td> <asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();" Text="Search" /> </td> </tbody> <--second row:--> <tr> <td ><input data-bind="text: $data.FormattedGLAccount" /> </td><td > <input data-bind="text: $data.GLAccountDescription" /> </td> <td > <input data-bind="text: $data.GLAccountTypeName" /> </td> <td > <<input data-bind="text: $data.GLAccountLongDescription" /> </td> <td > <asp:HyperLink runat="server" ID="HyperLink2" NavigateUrl="javascript:$find ('ModalPopupExtenderaccountsearchbehav').show();" Text="Search" /> </td> </tr> </table> </td>\[/code\]I tried changing the syntax binding around, but it still kept binding both. I tried a foreach loop, but was unsuccessful. I'm thinking i need to get the index of thr row, but i don't know how that would be done. Help please!!