Bootstrap, inline inputs have smaller gap when added dynamically

Question

In a modal: For some reason When I dynamically add a li with two input fields using jquery append the spacing of the first li (which was already there) has a bigger gap in between the two inputs then the rest that are added dynamically.
After checking the developer tools in Chrome, I see that they all have the same padding, margins and borders. From a CSS point of view I can't see a reason why there would be a larger gap in the first one.

<div class="modal-body">
<ul id="add-groups-list">
    <li class="add-group-item">
        <input type="text" placeholder="Group Name" />
        <input type="text" placeholder="Spots Available" />
    </li>
</ul>
<p><a href="#" id="add-group-in-modal" class="btn btn-small">+</a></p>
</div>

in a backbone view I do this:

addGroupInModal: function(e){
        e.preventDefault();
        this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /><input type="text" placeholder="Spots Available" /></li>');
    },

Here is some CSS:

#add-groups-list{
  list-style: none;
}

.add-group-item input{
  margin-left: 5px;
}

Answer 1

The reason is the white space, add a text node with 1 space in between the 2 inputs, or do not indent your HTML code.

this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /> <input type="text" placeholder="Spots Available" /></li>');