select2在动态创建的字段上不起作用

Question

如何使用select2在每个动态创建的新字段上获取选择框。   在此脚本中，我在第一个和最后一个创建的字段上获得了选择框。就像我创建了3个字段一样，我只能在1号和3号获得选择框，而在2号没有。如何解决此问题，以便我可以在每个新创建的字段上获得选择框。

我的脚本：

  <script type="text/javascript">
    $(document).ready(function () {
        var x = 1;
        var maxField = 100; //Input fields increment limitation
        var addButton = $('#add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML =
            '<div class="row" id="newrow">' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<select id="department-' + x + '" class="form-control dep"' +
            'placeholder="Enter Department" name="testing[]"' + '>' +
            '<option value = "">Select Department</option>' + '>' +
            '@foreach($allDepartments as $department)' + '>' +
            '<option value = "{{$department->dep_id}}">{{$department->dep_name}}</option>' + '>' +
            '@endforeach' + '>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input type="text" id="position-' + x + '" class="form-control"' +
            'placeholder="Enter Position" name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input type="text" id="board-' + x + '" class="form-control"' +
            'placeholder="Enter Board" name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input type="text" id="committee_name-' + x + '" class="form-control"' +
            'placeholder="Enter Committee" name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<a href="javascript:void(0);" class="remove_button"><img style="height:23px;width:23px" src={{asset('app-assets/images/remove_icon.png')}}/></a>' +
            '</div>'; //New input field html
        //Initial field counter is 1


        //Once add button is clicked
        $(addButton).click(function (e) {
            e.preventDefault();

            //Check maximum number of input fields
            if (x < maxField) {
                x++; //Increment field counter
                $(wrapper).append(fieldHTML);
                //Add field html
            }

            $('.dep').select2();

        });



        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function (e) {
            e.preventDefault();
            $(this).parent('#newrow').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });

    /*function removeDiv(no){
        $("#testingrow-"+no).remove();
        x--;
    }*/
</script>

HTML：

<div class="field_wrapper">
                                        @foreach($departments as $data)
                                            {{--{{dd($member_data['dep_name'])}}--}}
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="department">Department</label>
                                                        <select class="form-control dep" id="department"
                                                                name="testing[]">
                                                            <option value="">Select Department</option>
                                                            @foreach($allDepartments as $department)

                                                                {{--<option value={{$department->dep_id}}>{{$department->dep_name}}</option>--}}
                                                                <option value="{{$department['dep_id']}}" {{$department['dep_id'] == $data['dep_id'] ?  "selected" : ""}}>{{$department['dep_name']}}</option>

                                                            @endforeach

                                                        </select>
                                                        @if ($errors->has('department'))
                                                            <span style="color: red"
                                                                  class="help-block">{{ $errors->first('department') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="position">Position</label>
                                                        <input type="text" id="position" class="form-control"
                                                               placeholder="Enter Position"
                                                               name="testing[]"
                                                               value="{{$data['position']}}">
                                                        @if ($errors->has('position'))
                                                            <span style="color: red"
                                                                  class="help-block">{{ $errors->first('position') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="board">Board</label>
                                                        <input type="text" id="board" class="form-control"
                                                               placeholder="Enter Board"
                                                               name="testing[]"
                                                               value="{{$data['board']}}">
                                                        @if ($errors->has('board'))
                                                            <span style="color: red"
                                                                  class="help-block">{{ $errors->first('board') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="committee_name">Committee</label>
                                                        <input type="text" id="committee_name"
                                                               class="form-control"
                                                               placeholder="Enter Committee"
                                                               name="testing[]"
                                                               value="{{$data['committee']}}">
                                                        @if ($errors->has('committee_name'))
                                                            <span style="color: red"
                                                                  class="help-block">{{ $errors->first('committee_name') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <a href="javascript:void(0);" id="add_button"
                                       title="Add field"><img
                                                style="width: 20px;height: 20px"
                                                src="{{asset('app-assets/images/add_icon.png')}}"/></a>