JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class="popover-markup">
  <a href="#" class="trigger btn btn-default">Track</a>
  <div class="head hide">Track @item.FullName [@item.Id]</div>
  <div class="content hide">
    <div class="form-group">
      <label>Date Called:</label>
       <div class="input-group dtp">
      <input type="text" class="form-control" placeholder="Date called…"><span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
</span>
        </div>
    </div>
  </div>
  <span class="btn btn-info rr" id="abcd">Submit</span>
</div>

JavaScript

$('.popover-markup>.trigger').popover({
  html: true,
  title: function() {
    return $(this).parent().find('.head').html();
  },
  placement: "bottom",
  content: function() {
    return $(this).parent().find('.content').html();
  }
}).on('shown.bs.popover', function() {
  $('.dtp').datetimepicker();
});