title: Knockout.js ul li index() once recognized once not
body: <p>I have following code which works just fine</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt; 
          &lt;ul data-bind="foreach: SelectedCategories"&gt;
              &lt;li&gt;
                  &lt;input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                  value: $data" /&gt;
                  &lt;span data-bind="text: $data"&gt;&lt;/span&gt;
                  &lt;input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                  event: {click: $parent.removeCategory.bind($data)}" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>But when I add couple hidden fields within form but <strong>before ul element</strong> then browser informs that it cannot recognize index()</p>
  
  <blockquote>
    <p>unrecognized expression: input[data-bind='attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                        value: $data']</p>
  </blockquote>
  
  <p>code which causes error looks as follows</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
          &lt;input type="hidden" data-bind="attr:{Name : 'Product.Id'},
                                          value: Product.Id" /&gt;
          &lt;input type="hidden" data-bind="attr:{Name : 'Product.Name'},
                                          value: Product.Name" /&gt;
          &lt;input type="hidden" data-bind="attr:{Name : 'Product.Quantity'},
                                          value: Product.Quantity" /&gt;
          &lt;input type="hidden" data-bind="attr:{Name : 'Product.Netto'},
                                          value: Product.Netto" /&gt;
          &lt;ul data-bind="foreach: SelectedCategories"&gt;
              &lt;li&gt;
                  &lt;input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                  value: $data" /&gt;
                  &lt;span data-bind="text: $data"&gt;&lt;/span&gt;
                  &lt;input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                  event: {click: $parent.removeCategory.bind($data)}" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>Even though error message shows up function index() returns valid number so everything looks good except browser returning error. If I place hidden fields <strong>after ul</strong> no error occures. Do you have any idea what can cause such a problem?</p>
  
  <p><a href="https://i.stack.imgur.com/ufuli.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ufuli.png" alt="enter image description here"></a></p>