title: how to use bootstrap 4 popover in html select
body: <p>Popover is not working properly...it just letting me to select an option only once.</p>
  
  <p>Here is my code </p>
  
  <pre><code>&lt;select name="criteria[]" class="criteria form-control" data-original-title="" title=""&gt;
      &lt;option value="=" rel=""&gt;=&lt;/option&gt;
      &lt;option value="&gt;" rel=""&gt;&amp;gt;&lt;/option&gt;
      &lt;option value="&gt;=" rel=""&gt;&amp;gt;=&lt;/option&gt;
      &lt;option value="&lt;" rel=""&gt;&amp;lt;&lt;/option&gt;
      &lt;option value="&lt;=" rel=""&gt;&amp;lt;=&lt;/option&gt;
      &lt;option value="!=" rel=""&gt;!=&lt;/option&gt;
      &lt;option value="like" rel="Use % for wildcards"&gt;LIKE&lt;/option&gt;
      &lt;option value="not_like" rel="Use % for wildcards"&gt;NOT LIKE&lt;/option&gt;
      &lt;option value="where_in" rel="Please Input Comma Separated List"&gt;IN&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here is my JS</p>
  
  <pre><code>$(document).on('change', ".criteria", function(){
      var _this=$(this), rel=_this.find("option:selected").attr("rel");
      if(rel!=''){
          _this.popover('dispose').popover({
              title: 'Instruction',
              content: rel,
              placement: "top",
              delay: { show: 500, hide: 100 }
          });
          return;
      }else{
          _this.popover('dispose');
      }
  });
  </code></pre>
  
  <p>please help me to solve this issue</p>