Problems with styles within Javascript

I have a ComboBox with some styles of Boostrap 3 and js that are shown perfectly, but when adding another ComboBox with javascript it also loses the styles that the previous one has:

<div class="row">
    <div class="col-sm-4">
        <div class="form-group heading-group">
            <label class="control-label">Descripción del Producto</label>
        </div>
    </div>
    <div class="col-sm-1">
        <div class="form-group heading-group">
            <label class="control-label">Cantidad</label>
        </div>
    </div>
    <div class="col-sm-1">
        <div class="form-group heading-group">
            <label class="control-label">Costo</label>
        </div>
    </div>
</div>
<div id="prods">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <select class="form-control chosen-select" id="product_id" name="product_id[]">
                    <?php foreach ($product as $row): ?>
                        <option value=<?=$row->product_id?> ><?=$row->product_code?> - <?=$row->product_name?></option> 
                    <?php  endforeach;?>
                </select> 
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group">
                <input type="text" class="form-control text-right" id="cant" name="cant[]">
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group">
                <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]" readonly="true">
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <div class="form-group">
            <button type="button" class="btn btn-default" id="add_prod" value="adicionar">
                <i class="fa fa-plus"></i> Nuevo Producto
            </button>
        </div>
    </div> 
</div>

This is the code of the first line, through the add button, I add several more lines using this code:

 var max_prod = 20;   //max 20 row

    var x = 0;
    $('#add_prod').click (function(e) {
            e.preventDefault();     //prevenir nuevos clicks
            if (x < max_prod) {
                    $('#prods').append('<div class="row" id="row">\
                                            <div class="col-sm-4">\
                                                <div class="form-group">\
                                                    <select class="form-control chosen-select" id="product_id" name="product_id[]">\
                                                        <?php foreach ($product as $row): ?>\
                                                            <option value=<?=$row->product_id?> ><?=$row->product_code?> - <?=$row->product_name?></option> \
                                                        <?php  endforeach;?>\
                                                    </select>\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-1">\
                                                <div class="form-group">\
                                                    <input type="text" class="form-control text-right" id="cant" name="cant[]">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-1">\
                                                <div class="form-group">\
                                                    <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]" readonly="true">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-1">\
                                                <div class="form-group">\
                                                    <a href="#" class="del_prod btn btn-default"><i class="fa fa-trash"></i></a>\
                                                </div>\
                                            </div>\
                                         </div>');
                    $('.chosen-select').chosen({
                    width: '100%'
                });
x++;
                }
        });
        // Remover el div anterior
        $('#prods').on("click",".del_prod",function(e) {
                e.preventDefault();
                $(this).parent('div').parent('div').parent('div').remove();
            x--;
        });

But for some reason the styles that the first line or row has do not have the others.

I have reviewed several things and I have not found the problem.