title: Bootstrap - dynamically add input feedback glyphicon
body: <p>I am having trouble getting over the hump on this (most likely) obvious problem. I am validating inputs using onblur.</p>
  
  <p>If the input fails for whatever reason I am using this to give the user feedback on the input: </p>
  
  <pre><code>$('#' + $element.id).closest('.form-group')
  .addClass('has-error has-feedback')
  .append('&lt;span class="glyphicon glyphicon-remove form-control-feedback"&gt;&lt;/span&gt;');
  </code></pre>
  
  <p><strong>Working:</strong> </p>
  
  <ul>
  <li>Getting red input border </li>
  <li>Getting red label</li>
  </ul>
  
  <p><strong>Not working:</strong></p>
  
  <ul>
  <li>Glyphicon is not picking up the parent class rules therefore not
  getting positioned/colored</li>
  </ul>
  
  <p>correctly. </p>
  
  <p>Since I am dynamically creating the html element and appending it to the parent, the system isn't seeing the inheritance. Timing seems to be the trouble perhaps? Not sure the best solution other than adding some sort of callback to the addClass method?</p>
  
  <p>The markup I am generating matches the documentation on bootstrap. Just no joy.</p>
  
  <pre><code>&lt;div class="form-group has-error has-feedback"&gt;
      &lt;label for="lastName" class="control-label"&gt;* Last Name&lt;/label&gt;
      &lt;input type="text" id="lastName" name="lastName" class="form-control required"&gt;
      &lt;span class="glyphicon glyphicon-remove form-control-feedback"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>