title: When editing data in popup, data of only first row is displayed for all rows in knockoutjs
body: <p>I am using knockoutjs to show multiple record in table using foreach loop, in previous version of our software when user clicks on row edit it shows the input fields within the tr so the user can edit. Now my task is to show the input fields in bootstrap popup when user clicks the username of that particular tr. 
  The issue is when i click on any row it shows the data of the first row only in modal popup.
  Following is my full page code</p>
  
  <pre><code>&lt;div class="hidden cstm-right-sc" data-bind="css: { hidden: false }" id="AdminPanel"&gt;
  &lt;div id="CriteriaPanel" class="criteria"&gt;
      &lt;div class="criteria_filter"&gt;
          &lt;h3&gt;Filter Criteria&lt;/h3&gt;
          &lt;div class="filter-criteria_innr"&gt;
              &lt;label for="Company"&gt;Company&lt;/label&gt;
              &lt;select autofocus="autofocus" data-bind="options: Companies, optionsCaption: '(Select)', optionsText: 'Name', optionsValue: 'Id', value: CompanyId, visible: !Busy()" id="Company"&gt;&lt;/select&gt;
              &lt;span data-bind="visible: Busy"&gt;&lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt; loading...&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="CriteriaSummaryPanel" class="criteria cstm_sctn"&gt;
      &lt;div class="criteria_innr"&gt;
          &lt;h3&gt;Community Resident Portal - Client Administrators&lt;/h3&gt;
  
          &lt;div class="criteria_contnt"&gt;
              &lt;div data-bind="if: CompanyId()"&gt;
                  &lt;div data-bind="text: 'Company: ' + CompanyName()"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;table class="report-table" data-bind="if: CompanyId()"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  Login
              &lt;/th&gt;
              &lt;th&gt;
                  Email
              &lt;/th&gt;
              &lt;!-- ko if: $root.EditId() !== null --&gt;
              &lt;!--&lt;th&gt;
                  New Password
              &lt;/th&gt;
              &lt;th&gt;
                  Active
              &lt;/th&gt;
              &lt;th&gt;
              &lt;/th&gt;--&gt;
              &lt;!-- /ko --&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: Users"&gt;
          &lt;tr&gt;
              &lt;!-- ko if: $root.EditId() === Id() --&gt;
              &lt;td&gt;&lt;span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;span data-bind="text: EditEmail" /&gt;
              &lt;/td&gt;
  
              &lt;!--&lt;td&gt;
                  &lt;input data-bind="value: Password, valueUpdate: 'keyup'" type="text" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" type="checkbox" /&gt;
                  &lt;span data-bind="visible: $root.EditId() === 0"&gt;N/A&lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div id="InlineEditActionPanel"&gt;
                      &lt;span data-bind="click: $root.Save, css: { clickable: $root.IsValid }"&gt;Save&lt;/span&gt;
                      &lt;span class="clickable" data-bind="click: $root.CancelEdit"&gt;Cancel&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;--&gt;
              &lt;!-- /ko --&gt;
              &lt;!-- ko ifnot: $root.EditId() === Id() --&gt;
              &lt;td&gt;&lt;span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td data-bind="text: Email"&gt;&lt;/td&gt;
              &lt;!-- ko if: $root.EditId() === 0 --&gt;
              &lt;!--&lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;--&gt;
              &lt;!-- /ko --&gt;
              &lt;!-- /ko --&gt;
          &lt;/tr&gt;
          &lt;tr class="modal fade" id="myModal" role="dialog" tabindex="-1"&gt;
              &lt;td colspan="3" class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Client Admins&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div&gt;
                          &lt;input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text"&gt;
                          &lt;span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"&gt;&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text"&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;input data-bind="value: Password, valueUpdate: 'keyup'" type="text"&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox"&gt;
                          &lt;span data-bind="visible: $root.EditId() === 0"&gt;N/A&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div id="InlineEditActionPanel"&gt;
                              &lt;span data-bind="click: $root.Save, css: { clickable: $root.IsValid }"&gt;Save&lt;/span&gt;
                              &lt;span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal"&gt;Cancel&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }"&gt;
                  &lt;span data-bind="click: $root.Add, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal2"&gt;Add new user&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="modal fade" id="myModal2" role="dialog" tabindex="-1"&gt;
              &lt;td colspan="3" class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Client Admins&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div&gt;
                          &lt;input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text"&gt;
                          &lt;span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"&gt;&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text"&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;input data-bind="value: Password, valueUpdate: 'keyup'" type="text"&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox"&gt;
                          &lt;span data-bind="visible: $root.EditId() === 0"&gt;N/A&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div id="InlineEditActionPanel"&gt;
                              &lt;span data-bind="click: $root.Save, css: { clickable: $root.IsValid }"&gt;Save&lt;/span&gt;
                              &lt;span class="clickable" data-bind="click: $root.CancelEdit"&gt;Cancel&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please help me i am new to knockout js.
  It's very important.</p>