Having Issue on Targetting Dynamic Content with jQuery closest()

Having Issue on Targetting Dynamic Content with jQuery closest()

Can you please take a look at This Demo and let me know why I am not able to target closest popover using jQuery .closest()  ?

  1. <div class="container">
  2.   <button id="poper" type="button" class="btn btn-success btn-xs" data-container="body" data-toggle="popover" data-placement="top" data-content="<p>In this title I have text</p> <p class='text-center'><button class='btn btn-default btn-sm q-close'>Close</button></p>" data-html="true"> 
  3.     <i class="fa fa-question"></i>
  4.   </button>
  5. </div>
  6. <br>
  7. <div class="container">
  8.   <button id="poper" type="button" class="btn btn-success btn-xs" data-container="body" data-toggle="popover" data-placement="top" data-content="<p>In this title I have text</p> <p class='text-center'><button class='btn btn-default btn-sm q-close'>Close</button></p>" data-html="true"> 
  9.     <i class="fa fa-question"></i>
  10.   </button>
  11. </div>


  1. $(function () {
  2.  $("[data-toggle=popover]").popover({ html: true });
  3.   
  4. })


  5. $(document).on("click", '.q-close', function(){
  6.      $(this).closest("[data-toggle=popover]").click();
  7. });