full screen image when clicked

I have a list of before and after pics each are 300px by 300px. when u click on each image it should bring the clicked image in fullscreen. However it only brings the first image on full screen so if u click on pic 5 it full screens pic1.

How can I fix my script to brink up each image independently and not just the first image?

$(document).ready(function() {
  $('.gallery_pics').click(function(e) {
    $('.gallery_pics').toggleClass('fullscreen');
  });
});

.gallery_pics_holder {
  border: px solid green;
  width: 100%;
  text-align: center;
  height: 350px;
  display: table;
}
.gallery_pics {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  text-align: center;
  background-color: #3C0;
}
.gallery_pics img {
  width: 100%;
  height: 100%;
}
.gallery_pics:hover {
  cursor: pointer;
}
.gallery_pics.fullscreen img {
  width: 100%;
  height: 100%;
}
.gallery_pics.fullscreen {
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: #0FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="gallery_pics_holder">

  <div class="gallery_pics">
    <img src="images/before1.jpg" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after1.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before2.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after2.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before3.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after3.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before4.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after4.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before5.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after5.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before6.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after6.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before7.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after7.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before8.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after8.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before9.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after9.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before0.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after0.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->

Solution

You need to refer to this the element clicked itself not all .gallery_pics

$(document).ready(function() {
  $('.gallery_pics').click(function(e) {
    // Change Selector Here
    $(this).toggleClass('fullscreen');
  });
});

.gallery_pics_holder {
  border: px solid green;
  width: 100%;
  text-align: center;
  height: 350px;
  display: table;
}
.gallery_pics {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  text-align: center;
  background-color: #3C0;
}
.gallery_pics img {
  width: 100%;
  height: 100%;
}
.gallery_pics:hover {
  cursor: pointer;
}
.gallery_pics.fullscreen img {
  width: 100%;
  height: 100%;
}
.gallery_pics.fullscreen {
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: #0FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery_pics_holder">
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/sports">
  </div>
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/nature">
  </div>
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/">
  </div>
</div>