Bootstrap popover list

I'm making for my university a project to the bootstrap popover and I'm trying to add the list for the popover.

I don't know where to add this list, you can see my sample.

Click on the Select category after display popover,

I need like this list,(look sample image) anyone please help me to add this,

This is my sample code:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <a href="#"  data-toggle="popover" data-placement="bottom" data-content="Content"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
</div>

Bootstrap popover list

1 Answers