Select2 dropdown menu appears but the option does not

I need to display out a list of Models in a dropdown menu using jQuery Select2 function in which I have zero knowledge in. My problem is that the dropdown menu appeared in the page, however the option doesn't. Technically, it seems that it does appear but I just can't see it.

As you can see in the image below, the dropdown menu does appear in the page and I can expand the dropdown. However, the contents aren't visible.

Image

This is in my view for the dropdown menu part:

@section('js') <script src=""></script>

<script type="text/javascript">
    $('#model_id').select2({
        dropdownParent: $('#model_id')
        }
    ); </script>

<script>

$(document).ready(function(){

    var count = 1;
    dynamic_field(count);

    function dynamic_field(number){
    html = '<tr>';
        html += '<td>'+number+'<input type="hidden" name="row[]" value="'+number+'"></td>';    
        html += '<td><div class="form-group"> <select name="model_id[]" id="model_id" class="select2 form-control" required> <option value="" >Please select the model</option> @foreach ($model as $mod) <option value=""></option> @endforeach </select> @if($errors->has('model_id')) <div class="invalid-feedback">  </div> @endif <span class="help-block"></span> </td>';
        html += '<td><input id="quantity" type="number" min="1" name="quantity[]" class="form-control" required/></td>';
        html += '<td><input id="remark" type="text" name="remark[]" class="form-control" placeholder=""/></td>';
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').append(html);
        }
    }

    $(document).on('click', '#add', function(){
    count++;
    dynamic_field(count);
    });

    $(document).on('click', '.remove', function(){
    count--;
    $(this).closest("tr").remove();
    });

    $('form').submit(function(){
            $(this).find(':input[type=submit]').prop('disabled', true);
    }); }); </script>

@stop

I have found a solution saying that I need to increase the z-index but it's still not working. I hope you guys can help me with this.

via Chebli Mohamed