Question:

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

HTML

<table class="table table-responsive" id="tableAulas">
                    <thead>
                        <tr>
                            <th>Disciplina</th>
                            <th>Professor</th>
                            <th>Carga Horária</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>

                            <td>
                                <select class="form-control bselect" name="professor[]">
                                    <option>Select</option>
                                </select>
                            </td>

                        </tr>

                    </tbody>
                </table>
                <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>
                </p>

JS

    $(".bselect").select2({allowClear: true}).on('select2-open', function()
    {$(this).data('select2').results.addClass('overflowhidden').perfectScrollbar();});

    $('#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);
    showRowButton();
    });
        $('#removeRowAula').on('click', function(){
        $('#tableAulas tr:last').remove();
        showRowButton();
     });
    function showRowButton(){
        var rowCount = $('#tableAulas >tbody > tr').length;
        if(rowCount > 1){
            $('#removeRowAula').show();
        }else{
            $('#removeRowAula').hide();
        }
    }

I also left the example on the link: https://jsfiddle.net/8bs8onLc/

Answer:

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 .