title: Is is bad practice to ID each (used) element in html?
body: <p>I am wondering what the best practice would be to manipulate certain elements in an html page using jquery.  As it stands now, I have a panel, with an embedded form which includes an input box, checkbox, submit/reset/test buttons.  Right now I have each of these elements assigned an id so I can take the appropriate actions as each element is changed/selected.  However, I feel as if my code is becoming quite messy and unreadable by assigning and managing each element by id.  I know that it is efficient for the browsers to select by id, but is it better to simply give the panel/form an ID, and then call different selectors inside of the panel/form?  Are there any suggestions for selecting some of the elements I have assigned IDs below? (The ones I am modifying..etc).  Thanks!</p>
  
  <pre><code>        &lt;div class="row"&gt;
          &lt;div class="col-lg-6"&gt;
              &lt;div class="panel panel-default" id="sample_panel"&gt;
                  &lt;div class="panel-heading"&gt;
                      Heading
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;form role="form" id="form1"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;h4&gt;Subheading&lt;/h4&gt;
                              &lt;div class="form-group input-group"&gt;
                                  &lt;span class="input-group-addon" id="input_addon"&gt;some_text&lt;/span&gt;
                                  &lt;input type="text" id="input1" class="form-control" placeholder="Enter text"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="checkbox"&gt;
                                  &lt;label&gt;
                                      &lt;span class="help-block"&gt;
                                          &lt;input type="checkbox" id="cb1" &gt;some_text
                                      &lt;/span&gt;
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
                          &lt;button type="reset" class="btn id="reset_btn"&gt;Reset&lt;/button&gt;
                          &lt;button type="button" class="btn" id="test_btn"&gt;Test&lt;/button&gt;
                          &lt;i id="some_image"&gt;&lt;/i&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-footer" id="footer"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.col-lg-6 --&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  </code></pre>