title: Popup displays div just on first click
body: <p>I am using the <a href="https://github.com/amitsankhe/Jquery-SimpleSlider" rel="nofollow">jQuery Simple Slider Plugin</a> to display extra information for images, when they are clicked on by the user.<br><br>
  This plugin displays an image description in the popup window. That works fine.<br></p>
  
  <hr>
  
  <h2>THE PROBLEM</h2>
  
  <p>However, <strong>I would like to add another div to the popup</strong>, with the class name 'like-image'.<br><br>
  <strong>The first time you click the image everything works as I would like it to.</strong> The image description and the like-image div are both displayed.<br><br>
  <strong>If you click the image another time</strong> without reloading the page before, the <strong>like-image div is not displayed anymore</strong>.<br><br>
  <strong>What am I doing wrong?</strong><br><br>
  <hr><br></p>
  
  <h2><a href="https://jsfiddle.net/Ljf0wmj3/7/" rel="nofollow">THE FIDDLE</a></h2>
  
  <p><br></p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ul  class="product-gallery"&gt;
      &lt;li class="gallery-img"&gt;
          &lt;img src='http://lorempixel.com/200/300' alt="img01" /&gt; 
          &lt;div class="image-description" data-desc="Image1 Lorem Ipsum is simply dummy"&gt;&lt;/div&gt;
          &lt;div class="like-image"&gt;&lt;b&gt;This div just displays on first click.&lt;/b&gt;&lt;/div&gt;
      &lt;/li&gt;                   
  &lt;/ul&gt;
  </code></pre>
  
  <h2>JQUERY</h2>
  
  <pre><code>/*
  * jQuery Slider Plugin
  * Version : Am2_SimpleSlider.js
  * author  :amit &amp; amar
  */
  
  (function ($) {
  
  jQuery.fn.Am2_SimpleSlider = function () {
      //popup div
      $div = $('&lt;div class="product-gallery-popup"&gt; &lt;div class="popup-overlay"&gt;&lt;/div&gt;&lt;div class="product-popup-content"&gt;&lt;div class="product-image"&gt;&lt;img id="gallery-img" src="" alt="" /&gt;&lt;div class="gallery-nav-btns"&gt;&lt;a id="nav-btn-next" class="nav-btn next" &gt;&lt;/a&gt;&lt;a id="nav-btn-prev" class="nav-btn prev" &gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="product-information"&gt;&lt;p class="product-desc"&gt;&lt;/p&gt;&lt;hr&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;br&gt;&lt;div class="like-image"&gt;&lt;/div&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;hr&gt;&lt;/div&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;a href="" class="cross"&gt;X&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;').appendTo('body');
  
      //on image click   
      $(this).click(function () {
          $('.product-gallery-popup').fadeIn(500);
          $('body').css({ 'overflow': 'hidden' });
          $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
          $('.product-popup-content .product-information p').text($(this).find('.image-description').attr('data-desc'));
  
          // My attempt of adding the div to the popup window
          // The next line of code seems just to work once
          $('.product-popup-content .product-information .like-image').html($(this).find('.like-image'));
  
          $Current = $(this);
          $PreviousElm = $(this).prev();
          $nextElm = $(this).next();
          if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
          else { $('.nav-btn.prev').css({ 'display': 'block' }); }
          if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
          else { $('.nav-btn.next').css({ 'display': 'block' }); }
      });
      //on Next click
      $('.next').click(function () {
          $NewCurrent = $nextElm;
          $PreviousElm = $NewCurrent.prev();
          $nextElm = $NewCurrent.next();
          $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
  
          $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
          $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
          if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
          else { $('.nav-btn.prev').css({ 'display': 'block' }); }
          if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
          else { $('.nav-btn.next').css({ 'display': 'block' }); }
      });
      //on Prev click
      $('.prev').click(function () {
          $NewCurrent = $PreviousElm;
          $PreviousElm = $NewCurrent.prev();
          $nextElm = $NewCurrent.next();
          $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
  
          $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
          $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
          if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
          else { $('.nav-btn.prev').css({ 'display': 'block' }); }
          if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
          else { $('.nav-btn.next').css({ 'display': 'block' }); }
      });
      //Close Popup
      $('.cross,.popup-overlay').click(function () {
          $('.product-gallery-popup').fadeOut(500);
          $('body').css({ 'overflow': 'initial' });
      });
  
      //Key Events
      $(document).on('keyup', function (e) {
          e.preventDefault();
          //Close popup on esc
          if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
          //Next Img On Right Arrow Click
          if (e.keyCode === 39) { NextProduct(); }
          //Prev Img on Left Arrow Click
          if (e.keyCode === 37) { PrevProduct(); }
      });
  
      function NextProduct() {
          if ($nextElm.length === 1) {
              $NewCurrent = $nextElm;
              $PreviousElm = $NewCurrent.prev();
              $nextElm = $NewCurrent.next();
              $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
  
              $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
              $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
              if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
              else { $('.nav-btn.prev').css({ 'display': 'block' }); }
              if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
              else { $('.nav-btn.next').css({ 'display': 'block' }); }
          }
  
      }
  
      function PrevProduct() {
          if ($PreviousElm.length === 1) {
              $NewCurrent = $PreviousElm;
              $PreviousElm = $NewCurrent.prev();
              $nextElm = $NewCurrent.next();
              $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
  
              $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
              $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
              if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
              else { $('.nav-btn.prev').css({ 'display': 'block' }); }
              if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
              else { $('.nav-btn.next').css({ 'display': 'block' }); }
          }
  
      }
  };
  
  } (jQuery));
  
  // Call the plugin
  $('.gallery-img').Am2_SimpleSlider();
  </code></pre>
  
  <p>I would be very thankful for any kind of help!</p>