title: Html duplicated ID
body: <p>My control is built dynamically accordingly to user input, there are <code>n</code> textboxes whose IDs are dynamic too. </p>
  
  <p>However, I did not foresee that this HTML would be reused elsewhere within the same html page. </p>
  
  <p>The problem I'm facing now are the duplicated IDs, which are causing my jQuery functions to not work well. </p>
  
  <p>I do understand that IDs should be unique, however, can I avoid the issue by using the outermost <code>&lt;div&gt;</code> with different IDs? </p>
  
  <p>Any experts out there can give me some good advice?</p>
  
  <p>P.S. I'm looking for an effective solution, because if I need to change the ID for each element, it would require a lot of work in my jQuery. </p>
  
  <p>Please help. Thanks! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Container1"&gt;
    &lt;div id="Control"&gt;
      &lt;input type="text" id="TextBox1" /&gt;
      &lt;input type="text" id="TextBox2" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Container2"&gt;
    &lt;div id="Control"&gt;
      &lt;input type="text" id="TextBox1" /&gt;
      &lt;input type="text" id="TextBox2" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm wondering if, in the jQuery functions, I can do something like.. <code>#container1 &gt; #textbox1</code> in the selection? </p>