Error with custom inputs

Question

Hello, I’m using a script to add input fields to a div:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript"> 
        // Adicionar curso 
        $(document).ready(function(){
            var maxField = 15; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper

            var fieldHTML = '<div style="position:relative; height:100px;"><div><div class="form-group" style="position:absolute;top:-50px;"><div class="field_wrapper"><div class="form-group" style="width:470px; position:absolute;"><label>Instituição</label><input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/></div><div class="form-group" style="width:300px; position:absolute; left:510px;"><label>Curso</label><input type="text" class="form-control" name="field_name[]" value=""/></div><div class="form-group" style="width:170px; position:relative; left:790px;"><label>Conclusão</label><select class="form-control"><option></option><option>Concluido em:</option><option>Espero concluir em:</option></select></div><input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" style="position:absolute; top:60px;" title="Remove field">Remover Curso</a></div></div>'; //New input field html

var contCurso = 1; //Initial field counter is 1
            $(addButton).click(function(){ //Once add button is clicked
                if(contCurso < maxField){ //Check maximum number of input fields
                    contCurso++; //Increment field counter
                    $(wrapper).append(fieldHTML); // Add field html
                }
            });
            $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                contCurso--; //Decrement field counter
            });
        }); 

and the initial form:

<a href="javascript:void(0);" class="add_button" title="Add field">Adicionar Cursos</a>
                                                    <div>
                                                        <div class="form-group" style="width:470px; position:absolute;">
                                                            <label>Instituição</label>
                                                            <input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/>
                                                        </div>

                                                        <div class="form-group" style="width:300px; position:absolute; left:510px;">
                                                            <label>Curso</label>
                                                            <input type="text" class="form-control" name="field_name[]" value=""/>
                                                        </div>
                                                        <div class="form-group" style="width:170px; position:relative; left:790px;">
                                                            <label>Conclusão</label>
                                                            <select class="form-control">
                                                                <option></option>
                                                                <option>Concluido em:</option>
                                                                <option>Espero concluir em:</option>
                                                            </select>
                                                        </div>
                                                            <input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/>
                                                    </div> 

The script works, but I have a visual problem on the site. I am working with a ready made template that has several external css’s. So to modify some class properties, I needed to use styles. When Add Button is clicked 5 times for example, it creates five of these forms one at the bottom of the other. But if I delete the fifth, and create again, it will stop at the sixth position.

I believe the problem is in Tyles, but I don’t know much about this part, can you help me solve this problem? I thank you in advance!

Answer 1

As you are using the '.form-control' class, I took the liberty of using the bootstrap in this example:

HTML

I did a clean on the Tyles that you put and added some CSS classes on the buttons, but it would be good to take a look here mainly:

http://getbootstrap.com/css/#grid

 <div class="col-md-12 bar ">
      <a href="javascript:void(0);" class="btn btn-primary add_button" title="Add field">Adicionar Cursos</a>
   </div>
  <div class="field_wrapper">
    <div class="col-md-12 content">
          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Instituição</label>
            <input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/>
          </div>

          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Curso</label>
            <input type="text" class="form-control" name="field_name[]" value=""/>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Conclusão</label>
            <select class="form-control">
              <option></option>
              <option>Concluido em:</option>
              <option>Espero concluir em:</option>
            </select>
          </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="form-group">
            <label>Ano</label>
            <input class="form-control" placeholder="Ano" name="field_name[]" value=""/>
          </div>
      </div>
      <div class="col-md-12">
          <a href="javascript:void(0);" class="btn btn-default remove_button" title="Remove field">Remover Curso</a>
      </div>
    </div>

  </div> 

CSS

CSS was just to space the components better.

.content, .bar {
  margin-bottom: 10px; 
}

JS

Instead of using a variable storing HTML, use the Jquery clone().

https://api.jquery.com/clone/

And I made a change to the Remove button to appear only when you have more than one $('.content').

        // Adicionar curso 
        $(document).ready(function(){
            var maxField = 15; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper

          var fieldHTML = '';

var contCurso = 1; //Initial field counter is 1
            $(addButton).click(function(){ //Once add button is clicked
                if(contCurso < maxField){ //Check maximum number of input fields
                    console.log("aaa")
                    contCurso++; //Increment field counter
                    $('.content').clone().appendTo(wrapper); // Add field html
                }
                if($('.content').length != 1) {
                  $('.remove_button').removeClass('hide');
                }
            });
            $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
                e.preventDefault();
                $(this).parent().parent().remove(); //Remove field html
                contCurso--; //Decrement field counter
                if($('.content').length == 1) {
                  $('.remove_button').addClass('hide');
                }
            });
        }); 

LINK

Below the working link of this and increase the size of the output window to see the responsive Bootstrap classes working.

http://jsbin.com/qatacepoye/edit?html,css,js,output