title: How do i give a unique data id to custom buttons in a fancybox with dyamically added content
body: <p>i have a fancy box to which i have added two custom buttons: a like and dislike button. since images are added dynamically to the fancybox, how do i bind the instance image_id to the like and dislike buttons?</p>
  <pre><code>//a while loop populates the fancybox   
  &lt;a href=&quot;&lt;?php echo $imgpath; ?&gt;&quot; data-fancybox=&quot;gallery&quot; data-caption=&quot;&lt;?php echo $imgdesc; ?&gt;&quot;  data-img=&quot;&lt;?php echo $imgid;?&gt;&quot;
      data-user_id=&quot;&lt;?php  echo $user_id?&gt;&quot; class=&quot;fancybox&quot;&gt;
          &lt;img src=&quot;&lt;?php echo $imgpath; ?&gt;&quot; alt=&quot;&lt;?php echo $imgdesc; ?&gt;&quot; /&gt;
  
      &lt;/a&gt;
  </code></pre>
  <p>i would like to pass the image_id from the php side to the like and dislike buttons added below<br />
  adding like  and dislike button to fancybox</p>
  <pre><code>   $.fancybox.defaults.btnTpl.like = '&lt;button data-fancybox-like class=&quot; fa fa- thumbs-  o-up   fancybox-button fancybox-button--like&quot; title=&quot;like&quot;&gt;&lt;/button&gt;';
     $.fancybox.defaults.btnTpl.dislike = '&lt;button data-fancybox-dislike class=&quot; fa fa-thumbs-o-down   fancybox-button fancybox-button--dislike&quot; title=&quot;dislike&quot;&gt;&lt;/button&gt;';
  
     $.fancybox.defaults.buttons = [
      'slideShow',
      'fullScreen',
      'thumbs',
      'like', // the new  like button
      'dislike',//the new dislike button
      'close'];
  
  
       
  
      //getting instance of the clicked like button
  
      $('body').on('click', '[data-fancybox-like]', function(e) {
   var imgid =$.fancybox.getInstance().current.opts.$orig.data('img')
   var userr=$.fancybox.getInstance().current.opts.$orig.data('user_id');
   $clicked_btn=$(&quot;[data-liky='&quot;+imgid+&quot;']&quot;);
   
  if ($clicked_btn.hasClass('fa-thumbs-o-up')) {//checking if php had marked the like button as unliked
                       reaction = 'like';
                } else if($clicked_btn.hasClass('fa-thumbs-up')){//the like button had already been liked. liking again unlikes
                          reaction = 'unlike';      
                }
                //change this to the full ajax format
                  $.ajax({
                    url:&quot;server.php&quot;,
                    method:'POST',
                    data:{reaction:reaction,imgid:imgid,user:user},
                    success:function(data,status){}
  </code></pre>
  <p>The code works fine. the problem is the like and dislike buttons do not have a dynamic id</p>