javascript - jquery popup window only pulling last popup div -

i trying have link open popup window holds inline html , image when user clicks on link.

i've gotten work each link opens popup window, not show right content - keeps pulling last hidden div instead of 1 link clicked on.

;(function($){  	function deselect(e) {  	  $('.pop').slidefadetoggle(function() {  		e.removeclass('selected');  	  });      	}  	$(function() {  	  $('#popup,#popup2,#popup3,#popup4').on('click', function() {  		if($(this).hasclass('selected')) {  		  deselect($(this));                 		} else {  		  $(this).addclass('selected');  		  $('.pop').slidefadetoggle();  		}  		return false;  	  });  	  $('.close').on('click', function() {  		deselect($('#popup,#popup2,#popup3,#popup4'));  		return false;  	  });  	});  	  	$.prototype.slidefadetoggle = function(easing, callback) {  	  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);  	};      })(jquery);

@media screen , (max-width:980px) {        .hide {      	  font-weight: bold;      	  color: #0f2c6a;      	  display: block !important;      	}        }        .hide {        display: none;      }            a.selected {        background-color:#1f75cc;        color:white;        z-index:100;      }            .messagepop {            box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);        background-color:#ffffff;        border:1px solid #999999;        cursor:default;        display:none;        margin-top: 15px;        text-align:left;        min-width:500px;        max-width: 1200px;        min-height: 00px;        max-height: 820px;        z-index:99999;        padding: 25px 25px 25px;        margin: auto;        position: fixed;        top: 0;        left: 0;        bottom: 0;        right: 0;      }            @media screen , (max-width:480px) {        .messagepop {      	  min-width: 300px !important;      	  max-width: 330px !important;      	  min-height: 300px !important;      	  max-height: 330px !important;      	}      	  		  .pop-right {      		font-size: 16px;      			  }        }        @media screen , (max-width:980px) {      	.messagepop {      		min-width: 600px;      		max-width: 650px;      		min-height: 400px;      		max-height: 640px;      	  }      				  .pop-right {      		font-size: 20px;      			  }      	}      	@media screen , (max-width: 768px) {      	  .messagepop {      		  min-height: 500px;      		  max-height: 550px;      		  min-width:335px;      		  max-width:385px;      		}      		  .pop-right {      		font-size: 18px;      			  }      	  }      	        	  .messagepop p, .messagepop.div {      	  border-bottom: 1px solid #efefef;      	  margin: 8px 0;      	  padding-bottom: 8px;      	}      	      	#close {      	  position: absolute;      	  top: -10px;      	  right: -10px;      	  background: #000;      	  border-radius: 40px;      	  border: 1px solid #fff;      	  width: 25px;      	  height: 25px;      	}      	#close {      	  color: #fff;      	  font-size: 15px;      	  line-height: 20px;      	  text-decoration: none;      	  text-align: center;      	  width: 25px;      	  height: 25px;      	  margin: 0 auto;      	  position: absolute;      	  top: 0;      	  left: 0;      	  right: 0;      	  bottom: 0;      	}      	      	.pop-left {        float: left;        width: 50%;      }            .pop-right {        float: right;        width: 50%;            padding-left: 20px;          font-size: 20px;          line-height: 1.7em;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="hide">details</div>      <div class="messagepop pop">      <div id="close"><a class="close" href="/">x</a></div>      <div class="pop-left">left 1</div>      <div class="pop-right">right 1</div>      </div>      <a id="popup" href="#popup">view details</a>        <div class="hide">details</div>      <div class="messagepop pop">      <div id="close"><a class="close" href="/">x</a></div>      <div class="pop-left">left 2</div>      <div class="pop-right">right 2</div>      </div>      <a id="popup2" href="#popup2">view details</a>        <div class="hide">details</div>      <div class="messagepop pop">      <div id="close"><a class="close" href="/">x</a></div>      <div class="pop-left">left 3</div>      <div class="pop-right">right 3</div>      </div>      <a id="popup3" href="#popup3">view details</a>        <div class="hide">details</div>      <div class="messagepop pop">      <div id="close"><a class="close" href="/">x</a></div>      <div class="pop-left">left 4</div>      <div class="pop-right">right 4</div>      </div>      <a id="popup4" href="#popup4">view details</a>

as can see it's pulling last 'messagepop pop' div.

you trying select , fire events on elements using class selector. class selector give array object matching elements class.

what need find exact element clicked, have $(this) jquery object in click events tell exact element clicked user.

now have other elements using exact element $(this).

make changes below in code.

  (function($){     function deselect(e) {          e.prev().slidefadetoggle(function() {         e.removeclass('selected');       });      }     $(function() {       $('#popup,#popup2,#popup3,#popup4').on('click', function() {         if($(this).hasclass('selected')) {           deselect($(this));                        } else {           $(this).addclass('selected');           $(this).prev().slidefadetoggle();         }         return false;       });       $('.close').on('click', function() {     var link = $(this).parent().parent().next().attr("id");         deselect($("#"+link));         return false;       });     });      $.prototype.slidefadetoggle = function(easing, callback) {       return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);     }; })(jquery); 

working example : http://jsfiddle.net/srw67/3042/