jquery - When I click one image, all images get highlighted! Any thoughts? -

i'm trying add border image upon click, , use cookies plugin keep clicked style active after refreshing. while managed keep styles stay after refreshing browser, have problem of not being able click images individually.

when click 1 image, images hightlighted.

 $(function() {      var img_class = $.cookie('img_class');      if(img_class) {          $('img').attr('class', img_class);      }  	$(' img').click(function() {         $(this).each(function() {            $("a img").toggleclass("active");           $.cookie('img_class', $('img').attr('class'));      });  	  	});   });

/* less styles */  @import url(http://fonts.googleapis.com/css?family=raleway);    @import url(http://fonts.googleapis.com/css?family=montserrat);        @background: #333;  @maxhw: 100px;  @textclr: #999;  @borderclr: #fff;  @standardmarg : 5px;  @fontfamily: "raleway", sans-serif;    body   {    background-color:@background !important;  }    .page-header {  	 h2  	 {  		 color: @textclr;  		 font-family: @fontfamily;  	 }  }      .row {        .col-lg-4, col-sm-6,  col-xs-12  	  {  	     padding:0;  		 max-height:@maxhw * 3;   	     max-width:@maxhw * 3;           margin:@standardmarg;  	  }     }        {        	display:block;  	max-height:@maxhw * 3;    	max-width:@maxhw * 3;  	       img    	 {  	    max-height:@maxhw * 3;   		max-width:@maxhw * 3 ;  		border:4px solid @textclr;  	 }   }      .active   {     border: 4px solid @borderclr;   }

<section>  		  <div class="row">  			<div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image1.jpg" class=" img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image2.jpg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image3.jpg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image4.jpeg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image5.jpeg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image6.jpeg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image7.jpeg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image8.jpeg" class="img-responsive">  				</a>  			</div>  			 <div class="col-lg-4 col-sm-6 col-xs-12">  				<a href="#">  					 <img src="img/image9.jpg" class="img-responsive">  				</a>  			</div>  		  </div>  	</section>

yes, because toggle classes elements, when toggling class elements match selector add class elements not having class , removing class elements .active should check out $.removeclass , add class current element.

try using code

$(function() {     var img_class = $.cookie('img_class');     if(img_class) {         $('img').attr('class', img_class);     }     $('img').click(function(e) {         $('a img').removeclass('active');         $(e.currenttarget).addclass('active');         $.cookie('img_class', $(e.currenttarget).attr('class'));     }); });