jQuery hide( ) does not work for bootstrap dynamic form

Question

I have a dynamic form in bootstrap which I want to add forms to it with different fields based on the selection. If the selected option is sphere, the form should have diameter, position, color and material fields and if it is triangle other fields need to be added (shown in the picture). I am trying to hide the fields that I do not need to add using jQuery hide(), but it does not work. I would appreciate if you let me know what is wrong with my code.

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="material-selector" name="MaterialSelect[]">
          <option value=" " disabled="" selected="">material</option>
          <option value="normal">opaque</option>
          <option value="glass">glass</option>
          <option value="mirror">mirror</option>
      </select>
      <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>

javaScript:

function getHTMLString(formCount) {
    var complex_html = [
              '<div class="form-inline">',
                '<select class="input-small form-control" id="primitive-selector'+ formCount +'" 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'+ formCount +'"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',
                '<input type="text" class="input-small form-control"  id="sphere-position'+ formCount +'" name="SpherePosition[]"  placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="A-position'+ formCount +'" name="VerticeAPosition[]" placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="B-position'+ formCount +'" name="VerticeBPosition[]" placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="C-position'+ formCount +'" name="VerticeCPosition[]" placeholder="(x, y, z)"> ',

                '<select class="input-small form-control" id="circle-color-selector'+ formCount +'" 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'+formCount+'"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
                '</button>',  
            '</div>',
    ].join('');
    return complex_html;
}
$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        if (formCount < 4) { 
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
            $('#primitive-selector'+formCount).on('change', function(){
                if($(this).val() === "sphere"){
                    $('#A-position'+ formCount).hide();
                    $('#B-position'+ formCount).hide();
                    $('#C-position'+ formCount).hide();
                } else {
                    $('#diameter'+ formCount).hide();
                    $('#sphere-position'+ formCount).hide();
                }

            });

        } else {
            return;     
        }
        formCount++;
    });


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

    });
});

Answer 1

Instead to add the change event handler:

$('#primitive-selector'+formCount).on('change', function(){

inside the:

$('#add_more').on('click', function(e) {

you can attach directly to the document as a delegated event:

$(document).on('change', '[id^=primitive-selector]', function(e) {
    var formCount = this.id.replace('primitive-selector', '');

    var TselectorString = '#A-position'+ formCount + ', #B-position'+ formCount +
            ', #C-position'+ formCount;
    var SselectorString = '#diameter'+ formCount + ', #sphere-position'+ formCount +
            ', #material-selector'+ formCount + ', #circle-color-selector'+ formCount
    var bIsS = $(this).val() === "sphere";
    $(SselectorString).toggle(bIsS);
    $(TselectorString).toggle(!bIsS);
});

In the same way you can delegate the remove event.

I used the jQuery Attribute Starts With Selector [name^=”value”] instead of addressing by id.

The snippet:

function getHTMLString(formCount) {
    var complex_html = [
        '<div class="form-inline">',
        '<select class="input-small form-control" id="primitive-selector'+ formCount +'" 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'+ formCount +'"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',
        '<input type="text" class="input-small form-control"  id="sphere-position'+ formCount +'" name="SpherePosition[]"  placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="A-position'+ formCount +'" name="VerticeAPosition[]" placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="B-position'+ formCount +'" name="VerticeBPosition[]" placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="C-position'+ formCount +'" name="VerticeCPosition[]" placeholder="(x, y, z)"> ',

        '<select class="input-small form-control" id="material-selector'+ formCount +'" name="MaterialSelect[]">',
        '<option value=" " disabled="" selected="">material</option>',
        '<option value="normal">opaque</option>',
        '<option value="glass">glass</option>',
        '<option value="mirror">mirror</option>',
        '</select>',

        '<select class="input-small form-control" id="circle-color-selector'+ formCount +'" 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'+formCount+'"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
        '</button>',
        '</div>',
    ].join('');
    return complex_html;
}

var formCount = 0;

$(document).on("click", "[id^=remove_more]", function(e){ //user click on remove text
    e.preventDefault();
    $(this).closest('div.form-inline').remove();
    formCount--;
});


$(document).on('change', '[id^=primitive-selector]', function(e) {
    if (this.id == 'primitive-selector') {
        //return;
    }
    var formCount = this.id.replace('primitive-selector', '');

    var TselectorString = '#A-position'+ formCount + ', #B-position'+ formCount +
            ', #C-position'+ formCount;
    var SselectorString = '#diameter'+ formCount + ', #sphere-position'+ formCount +
            ', #material-selector'+ formCount + ', #circle-color-selector'+ formCount
    var bIsS = $(this).val() === "sphere";
    $(SselectorString).toggle(bIsS);
    $(TselectorString).toggle(!bIsS);
});


$(document).ready(function() {
    $('[name^="VerticeCPosition"]').hide();
    $('#add_more').on('click', function(e) {
        if (formCount < 4) {
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
        } else {
            return;
        }
        formCount++;
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<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)">

            <input type="text" class="input-small form-control" id="A-position" name="VerticeAPosition[]" placeholder="(x, y, z)">
            <input type="text" class="input-small form-control" id="B-position" name="VerticeBPosition[]" placeholder="(x, y, z)">
            <input type="text" class="input-small form-control" id="C-position" name="VerticeCPosition[]" placeholder="(x, y, z)">

            <select class="input-small form-control" id="material-selector" name="MaterialSelect[]">
                <option value=" " disabled="" selected="">material</option>
                <option value="normal">opaque</option>
                <option value="glass">glass</option>
                <option value="mirror">mirror</option>
            </select>
            <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>

Answer 2

The hide() method is working just fine, the logic you have in there is wrong.

$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        formCount++;
        if (formCount < 4) { 
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
            $(document).on('change','#primitive-selector'+formCount-1, function(){
                console.log('change...' + $(this).val() + ' ' + '#A-position'+ formCount);
                if($(this).val() === "sphere"){
                    $('#A-position'+ formCount).hide();
                    $('#B-position'+ formCount).hide();
                    $('#C-position'+ formCount).hide();
                } else {
                    $('#diameter'+ formCount).hide();
                    $('#sphere-position'+ formCount).hide();
                }

            });

        } else {
            return;     
        }
    });

Take a look at the following fiddle. It works (kind of) with the code you provided and the corrections made. https://jsfiddle.net/hdp513yq/