No space between the elements in inline form bootstrap (dynamic form)

Question

I have a dynamic form with multiple fields in bootstrap and when I add a new form, it is not aligned with the first one. I appreciate if you can let me know how I can make the space between the inline elements.

image of the form

html:

  <div class="row" id="dynamic_form">
    <div class="form-group form-horizontal">
    <label class="control-label">Primitives</label>
      <div class="form-inline">
        <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
          <option value=" " disabled selected>primitive</option>
          <option value="sphere">sphere</option>
          <option value="triangle">triangle</option>
        </select>
        <input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)">

        <input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)">

        <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
          <option value=" " disabled selected>color</option>
          <option value="red">red</option>
          <option value="blue">blue</option>
          <option value="green">green</option>
          <option value="yellow">yellow</option>    
        </select> 
        <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button>  
      </div>
    </div>
  </div>

css:

.form-inline .form-group {
    margin: 2px 2px;
}

JavaScript:

function getHTMLString() {
    var complex_html = [
        '<div class="container">',
        '<div class="row" id="dynamic_form">',
            '<div class="form-group" >',
              '<div class="form-inline">',
                '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
                  '<option value=" " disabled selected>primitive</option>',
                  '<option value="sphere">sphere</option>',
                  '<option value="triangle">triangle</option>',
                '</select>',
                '<input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)">',

                '<input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)">',

                '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
                  '<option value=" " disabled selected>color</option>',
                  '<option value="red">red</option>',
                  '<option value="blue">blue</option>',
                  '<option value="green">green</option>',
                  '<option value="yellow">yellow</option>',    
                '</select>', 
                '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
                '</button>',  
              '</div>',
            '</div>',
          '</div>',
          '</div>',
    ].join('');
    return complex_html;
}

$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        console.log("here")
        if (formCount < 4) { 
            var html = getHTMLString();
            var element = $(html);

            $('#dynamic_form').append(html);
            formCount++;
        } else {
            return;
        }
    });


    $('#dynamic_form').on("click","#remove_more", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').parent('div').remove(); formCount--;

    })
});

Answer 1

I think there are a few problems..

1) Just append the form inline, not the container and group.

2) form-inline elements are display: inline-block which means any whitespace in the HTML markup will create a space between elements. Therefore, the original static form looks correct with space. However the dynamically added form has no HTML whitespace between elements because it's generated from a concatenated string array. Update the complex string with a space after each form input.

http://www.codeply.com/go/kVWFHnAjiG

function getHTMLString() {
    var complex_html = [
              '<div class="form-inline">',
                '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
                  '<option value=" " disabled selected>primitive</option>',
                  '<option value="sphere">sphere</option>',
                  '<option value="triangle">triangle</option>',
                '</select> ',
                '<input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',

                '<input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)"> ',

                '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
                  '<option value=" " disabled selected>color</option>',
                  '<option value="red">red</option>',
                  '<option value="blue">blue</option>',
                  '<option value="green">green</option>',
                  '<option value="yellow">yellow</option>',    
                '</select> ', 
                '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
                '</button>',  
            '</div>',
    ].join('');
    return complex_html;
}

Also note: The dynamically built HTML is invalid becuse there are multple elements with the same ID attribute.