Problems cloning a field using Jquery


I'm trying to clone an object using Jquery, but the width of the cloned field isn't as expected.


<table class="table table-responsive" id="tableAulas">
                            <th>Carga Horária</th>

                                <select class="form-control bselect" name="professor[]">


                <p class="text-right">
                    <a href="javascript:void(0)" class="btn btn-sm btn-success" id="addRowAula"><i class="fa-plus"></i> Adicionar campo</a>
                    <a href="javascript:void(0)" class="btn btn-sm btn-danger" id="removeRowAula" style="display:none;" ><i class="fa-minus"></i> Remover último campo</a>


    $(".bselect").select2({allowClear: true}).on('select2-open', function()

    $('#addRowAula').on('click', function(){

    console.log('add row');
    var html ='<tr> <td> <select class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

    $("#tableAulas > tbody").append(html);
        $('#removeRowAula').on('click', function(){
        $('#tableAulas tr:last').remove();
    function showRowButton(){
        var rowCount = $('#tableAulas >tbody > tr').length;
        if(rowCount > 1){

I also left the example on the link:


If you want the width of the cloned field to be the same as the original field, one way to do this is to include a style in the code that adds the field.

Replace this line:

var html ='<tr> <td> <select class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

For this:

var html ='<tr> <td> <select style="width: '+$(".select2-selection").outerWidth()+'px;" class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

The $(".select2-selection").outerWidth() takes the full width of the original field by the .select2-selection class.

See your updated JSFiddle .

Scroll to Top