title: Modal pop up repeating data
body: <p>HTML</p>
  
  <pre><code>&lt;a class="btn" data-popup-open="popup-1" href="#"&gt;More Details&lt;/a&gt;
  
    &lt;div class="popup" data-popup="popup-1"&gt;
      &lt;div class="popup-inner"&gt;
      &lt;h2&gt;Wow! This is Awesome! (Popup #1)&lt;/h2&gt;
      &lt;p&gt;Per Serve : 5g   Energy : 20kcal Protein : 0.0g Fat­Total : 0.0g  Saturated &amp;nbsp; 0.0g  Carbohydrate : 0.0g Package Size : 1 x 24 x 350 g&lt;/p&gt;
      &lt;p&gt;&lt;a data-popup-close="popup-1" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt;
      &lt;a class="popup-close" data-popup-close="popup-1" href="#"&gt;x&lt;/a&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;a class="btn" data-popup-open="popup-1" href="#"&gt;Quick inquiry&lt;/a&gt;
  
    &lt;div class="popup" data-popup="popup-1"&gt;
      &lt;div class="popup-inner"&gt;
      &lt;h2&gt;This is the one that wont work(Popup #1)&lt;/h2&gt;
      &lt;p&gt;Another data that wont appear&lt;/p&gt;
      &lt;p&gt;&lt;a data-popup-close="popup-1" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt;
      &lt;a class="popup-close" data-popup-close="popup-1" href="#"&gt;x&lt;/a&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>/* Outer */
  .popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
  }
  
  /* Inner */
  .popup-inner {
    max-width:700px;
    width:90%;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#fff;
  }
  
  /* Close Button */
  .popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
  }
  
  .popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
  //----- OPEN
  $('[data-popup-open]').on('click', function(e)  {
      var targeted_popup_class = jQuery(this).attr('data-popup-open');
      $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
  
      e.preventDefault();
  });
  
  //----- CLOSE
  $('[data-popup-close]').on('click', function(e)  {
      var targeted_popup_class = jQuery(this).attr('data-popup-close');
      $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
  
      e.preventDefault();
  });
  });
  </code></pre>
  
  <p>The code works but it doesn't show the second pop up's content. I have tried different jquery pop up as well but nothing changes the data inside the pop up. When the next button is clicked, the data in the box remains the same. How do I solve this? </p>