I do not have the same rendering with elements created dynamically - JQuery - Bootstrap

Question

I'm using Bootstrap and Jquery for my website, and I have a issue. When I create elements dynamically, I don't have the same rendering as my 'static' elements, that's my html elements :

<div class="row" style="margin-bottom: 10px;">
  <div class="col-xs-4 col-sm-2">
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-cog"></span>
    </button>
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-remove"></span>
    </button>
  </div>
</div>

That's the rendering :

And that's the rendering, when I click on the Add button :

I don't know why the rendering is like that because I have put the same html element in my Add button listenner :

        $("#btnAddBuild").click(function(){
        var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
                                "<div class='col-xs-4 col-sm-2'>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
                                "</div>" +
                            "</div>"
        //console.log(htmlContent);
        $("#rowListBuilds").append(htmlContent);
    });

Thanks

Answer 1

In the static html markup, there are multiple space characters between the buttons(which is collapsed to a single space), but in the string literal used for the dynamic elements there is no space.

Just add a [space] character between the button elements

 $("#btnAddBuild").click(function() {
   var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
     "<div class='col-xs-4 col-sm-2'>" +
     "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button> " +
     "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
     "</div>" +
     "</div>"
     //console.log(htmlContent);
   $("#rowListBuilds").append(htmlContent);
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowListBuilds"></div>
<button id="btnAddBuild">Add</button>