两个相同的弹出插件在一页上不起作用

Question

I am using popup plugin presented by some user of stackoverflow. It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc

First one:

    ...
    <a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
    <div class="messagepop pop">
      <p>popup message1</p>
    </div>
    ...

<script>
  function deselect(e) {
    $('.pop').slideFadeToggle(function() {
      e.removeClass('selected');
    });    
  }

  $(function() {
    $('#contact').on('click', function() {
      if($(this).hasClass('selected')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected');
        $('.pop').slideFadeToggle();
      }
      return false;
    });

    $('.close').on('click', function() {
      deselect($('#contact'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };

</script>

Secone one:

   ...
   <a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
   <div class='messagepop2 pop2'>
     <p>popup message 2</p>
   </div>
   ...   

<script>
  function deselect(e) {
    $('.pop2').slideFadeToggle(function() {
      e.removeClass('selected2');
    });    
  }

  $(function() {
    $('#menuButtonBilety').on('click', function() {
      if($(this).hasClass('selected2')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected2');
        $('.pop2').slideFadeToggle();
      }
      return false;
    });

    $('.close2').on('click', function() {
      deselect($('#menuButtonBilety'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };
</script>

EDIT: The script comes from the best answer HERE

Answer 1

In your case probably you are overriding the deselect function.

But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:

function deselect(e) {
    e.next('.pop').slideFadeToggle(function () {
        e.removeClass('selected');
    });
}

$(function () {
    $('.menuButton').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $(this).next('.pop').slideFadeToggle();
        }
        return false;
    });


});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};

Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/