Ytukyg

How i can get select box on every dynamically created new field with select2.
In this script i'm getting select box on 1st and last created field. like i have created 3 fields i only get select box on 1st and 3rd not on 2nd. how to solve this problem so that i can get select box on every new created field.

My Script:

  <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>