Bootstrap datetimepicker not working inside table-responsive Set table-responsive dynamicaly

/// HTML

<div class="panel-body">

  <div class="table-responsive">

    <table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">

      <thead>

        <tr>

          <th class="col-sm-2">Debt Ref</th>

          <th class="col-sm-2">Due Date</th>

          <th class="col-sm-2">Amount Paid</th>

          <th class="col-sm-2">Account</th>

          <th class="col-sm-2">Reconcile Date</th>

        </tr>

      </thead>

      <tbody>

        <tr class="armitage">

          <td>

            <div>NOR087-DAN052</div>

          </td>

          <td>

            <div>05/01/2016</div>

          </td>

          <td>

            <div>180.00</div>

          </td>

          <td>

            <div class="col-sm-12">Paralegal (951)</div>

          </td>

          <td>

            <div class="col-sm-12">

              <input type="text" placeholder="Reconcile Date" name="dates" id="dates" class="form-control ">

            </div>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</div>

////CSS

        .fixed-table-body {

  overflow-x: visible;

  overflow-y: visible;

  height: 100%;

}

////JS

  $(document).ready(function () {

$(document).ready(function () {

                    $('#dates).datetimepicker().on('dp.show', function () {

                        $(this).closest('.table-responsive').removeClass('table-responsive').addClass('temp');

                    });

                    $('#dates).datetimepicker().on('dp.hide', function () {

                        $(this).closest('.temp').addClass('table-responsive').removeClass('temp')

                    });

})