Bootstrap-datetimepicker - dynamically add shows up in wrong area

Question

So after writing to the DB through ajax. my success function. builds an element and appends it to the table. Then after it appends it to the table it calls a datetimepicker on that new appended row. However the date time picker (calendar) shows up somewhere completely weird. See screen shot.

One thing I should mention is that these notes are in a tab-pane it looks like

Please see below for the view and the javascript

VIEW:

<div class="panel-body">
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <ul  class="nav nav-pills">
            <li class="active">
                <a  href="#cdetails" data-toggle="tab">Details</a>
            </li>
            <li>
                <a href="#Quotes" data-toggle="tab">Quotes</a>
            </li>
            <li>
                <a href="#Notes" data-toggle="tab">Notes</a>
            </li>
            <li>
                <a href="#Documents" data-toggle="tab">Documents</a>
            </li>
        </ul>
    <div class="tab-content">
        <div id="cdetails" class="tab-pane active">
            <table class="table ">
                <thead>
                </thead>
                <tbody>
                    <tr ><td colspan="4"></td></tr>

                    <tr><td><b>Code</b></td><td colspan="3">{{$item->code}}</td></tr>
                    <tr><td><b>Name</b></td><td colspan="3">{{$item->name}}</td></tr>
                    <tr><td><b>Customer</b></td><td colspan="3">{{$item->customer->company}}</td></tr>
                    <tr><td><b>Contract Type</b></td><td colspan="3">{{$item->contype}}</td></tr>
                    <tr><td><b>Contract Amount</b></td><td colspan="3">{{$item->contractAmount}}</td></tr>
                    <tr><td><b>Hourly Rate</b></td><td colspan="3">{{$item->rate}}</td></tr>
                </tbody>
            </table>
            @if(1 == 2)
                <h3>Phases <button class="btn btn-sm btn-primary pull-right" href="#assigntemplate" data-toggle="modal" >Assign a Template</button></h3><hr />
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($item->phases as $p)
                            <tr>
                                <td>{{$p->name}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div><!-- end details tab -->
        <div id="Quotes" class="tab-pane">

        </div><!-- end of quotes tab -->
        <div id="Notes" class="tab-pane">
            <table class="table">
                <thead>
                    <tr >
                        <th class="">Date</th>
                        <th class="col-md-8">Note</th>
                        <th class="">Action</th>
                    </tr>
                </thead>
                <tbody id="noteListTBody">
                <button href="#addNote" data-toggle="modal" class="btn btn-info pull-right" style="color:white; margin:20px 8px 0 0; position:relative; top:-50px; padding:3px; width:30px; height:30x;"><span class="glyphicon glyphicon-plus"></span></button>
                    @foreach($item->notes as $note)
                        <tr data-id="{{$note->id}}">
                            <td><input type="text" class="form-control dpick" name="date" disabled value="{{Carbon\Carbon::parse($note->date)->format('m/d/Y')}}" ></td>
                            <td><textarea type="text" class="form-control dnote"  name="note" disabled>{{$note->note}}</textarea></td>
                            <td>
                                <button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
                                <button class="btn btn-primary pull-right btnEditNote"><span class="glyphicon glyphicon-pencil"></span></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- end of notes tab -->
    </div>

JAVASCRIPT

$.ajax({
        type: 'POST',
        url: "/api/notes",
        data: {
            '_token'        : ajaxtoken,
            'item_id'       : itemID,
            'item_type'     : itemType,
            'user_id'       : userID,
            'date'          : dateValue,
            'note'          : noteValue


        },
        success: function(result) {
            console.log(result);
            // noteListTBody
            var noteRow = `
                <tr data-id="`+result.item_id+`">
                    <td><input type="text" class="form-control dpick" name="date" disabled value="`+dateObject+`" ></td>
                    <td><textarea type="text" class="form-control"  name="note" disabled>`+noteValue+`</textarea></td>
                    <td>
                        <button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
                        <button class="btn btn-primary pull-right btnEditNote" ><span class="glyphicon glyphicon-pencil"></span></button>
                    </td>
                </tr>
            `;

            $('#noteListTBody').append(noteRow);

            $('.btnCloseModal').click();
            $('#noteListTBody tr[data-id="'+result.item_id+'"]').find('.dpick').datetimepicker({format: 'MM/DD/YYYY'});

        }
    });

Answer 1

So I do not know the exact fact. It could be one of the 2 possible reasons.

1. datetimepicker - requires a div wrapper for the target relative positioning
2. datetimepicker - requires an input-group div wrapper for the target relative positioning

Either way. I used the following code from their site.

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Once I did this. And moved the datepicker from targeting the input directly to targeting the group around it (the div) it worked in it's relative positioning perfectly.