Q:

Why aren't my inputs formatting correctly in bootstrap

I have a form, which is created dynamically, which is the reason for the jquery (It's easier).  I am trying to figure out why the input fields are not formatting correctly.
I have just changed the way it is formatted, from being in a table, to a more bootstrappy way of things, and this way, only the input fields I put icons on are working properly.  The jQuery works fine when I have the same fields in the table.
What am I doing wrong?
There is also a jsfiddle.
Here is a representative portion of the form:
<div class="container">
  <div class="form-group row">
    <label for="first_name" class="sr-only">*
      <label for="id_first_name">First name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="last_name" class="sr-only">*
      <label for="id_last_name">Last name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="last_name" required maxlength="50" required id="id_last_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="phone" class="sr-only">*
      <label for="id_phone">Phone:</label>
    </label>
    <div class="input-group">
      <input id="id_phone" name="phone" type="tel" required />
    </div>
  </div>
</div>

Since my fields are created dynamically, and their attributes are more work to get at, I have used jQuery to add the form-control class to the inputs, and some other minor things.
Here is that code:
$("input[type='email']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>');
$("input[type='tel']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></div>');
$('input').addClass('form-control').each(function () {
    var $this = $(this);
    var $label = $('label[for="' + $this.attr('id') + '"]');
    $this.attr('placeholder', $label.text().slice(0, -1));
});
$('select').addClass('form-control');

A:

This is happening because you have your regular inputs inside of an input-group element but are not adding an icon inside with the input which it expects.
For any input that wont have an icon, change your html from:
<div class="input-group">
  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
</div>

To simply:
  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">

and the formatting will work as expected.
working jsfiddle

