jquery - Two popups dont work properly

Question

I can include one popup into my site, but when I want to add second this don't work properly.

I'm looking for two buttons with individual popup for each,.

check Jsfiddle and here plugin offical site

What's wrong with this?

JQUERY

(function ($) {
     $(function () {
          $('#my-button,#my-button2').bind('click', function (e) {
               e.preventDefault();
               $('#element_to_pop_up,#element_to_pop_up2').bPopup();
           });
       });
 })(jQuery);

CSS

#element_to_pop_up {
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none;
   padding:20px;
   min-width:400px;
   min-height: 180px;
}

.b-close {
   cursor:pointer;
   position:absolute;
   right:10px;
   top:5px;
};

#element_to_pop_up2 {
background-color: black;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;

}

HTML

<button id="my-button">POP IT UP</button>
<div id="element_to_pop_up"> <a class="b-close">x<a/>
Content of popup
</div>

<button id="my-button">POP IT UP</button>
<div id="element_to_pop_up2"> <a class="b-close">x<a/>
Content of popup
</div>

Answer 1

Uh.. seems like this is what you want.

<button id="my-button" class="popBtn" data-toggle-pop="element_to_pop_up">POP IT UP</button>
<div id="element_to_pop_up"> <a class="b-close">x<a/>
Content of popup
</div>

<button id="my-button2" class="popBtn" data-toggle-pop="element_to_pop_up2">POP IT UP</button> <!-- You put my-button in your code -->
<div id="element_to_pop_up2"> <a class="b-close">x<a/>
Content of popup
</div>

JS:

jQuery(document).ready(function($) {
    $('.popBtn').click(function() {
        var target = $(this).attr('data-toggle-pop');
        $('#' + target).bPopup();
    });
});

Fiddle: http://jsfiddle.net/HSCwC/

Answer 2

You are not using code with good way.

I just change for easy way.

<button class="my-button" data-rel="element_to_pop_up">POP IT UP</button>
<div id="element_to_pop_up"> <a class="b-close">x<a/>
    Content of popup
</div>
<button class="my-button" data-rel="element_to_pop_up2">POP IT UP</button>
<div id="element_to_pop_up2" >
    <a class="b-close">x<a/>
    Content of popup2
</div>

I added the class and data-rel attribute.

(function ($) {

        $('.my-button').bind('click', function (e) {
            e.preventDefault();
            var result_div = $(this).data('rel')
            $('#'+result_div).bPopup();
        });


})(jQuery);

Answer 3

Try this

 $('#my-button').bind('click', function (e) {

            e.preventDefault();

            $('#element_to_pop_up1').bPopup();
            $('#element_to_pop_up2').bPopup();

 });

JSFIDDLE