Div floating left in another div onclick to fill screen

Question

I have looked for a solution to this for ages, but have not been able to find an answer. I have some divs inside another div which all float left. I want it so when one is clicked it expands to fill the entire screen and then when a close button that appears in the top right is clicked it goes back to normal, without pushing any of the other divs around. I HAVE been able to achieve this but when i click the div again after the close button is pressed it wont re-expand. Help!

/* We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules */

/* Click on the container */
$("#box1").on('click', function() {
  $("body").append('<style id="lightbox-animations" type="text/css"></style>');
 /* The position of the container will be set to fixed, so set the top & left properties of the container */ 
 var bounding_box = $("#box1").get(0).getBoundingClientRect();
 $(this).css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' });
  $('#twitter').hide();
   $('#googlebadge').hide();
  

 /* Set container to fixed position. Add animation */
 $(this).addClass('in-animation');

 /* An empty container has to be added in place of the lightbox container so that the elements below don't come up
 Dimensions of this empty container is the same as the original container */
 $('<div id="empty-container"></div>').insertAfter("#box1");

 /* To animate the container from full-screen to normal, we need dynamic keyframes */
 var styles = '';
 styles = '@keyframes outlightbox {';
  styles += '0% {'; 
  styles += 'height: 100%;';
  styles += 'width: 100%;';
  styles += 'top: 0px;';
  styles += 'left: 0px;';
  styles += '}';
  styles += '50% {'; 
  styles += 'height: 200px;';
  styles += 'top: ' + bounding_box.y + 'px;';
  styles += '}';
  styles += '100% {';
  styles += 'height: 200px;';
  styles += 'width: 500px;';
  styles += 'top: ' + bounding_box.y + 'px;';
  styles += 'left: ' + bounding_box.x + 'px;';
  styles += '}';
 styles += '}';

 /* Add keyframe to CSS */
 $("#lightbox-animations").get(0).sheet.insertRule(styles, 0);

 /* Hide the window scrollbar */
 $("body").css('overflow', 'hidden');
});

/* Click on close button when full-screen */
$("#close").on('click', function(e) {
 $("#close").hide();
    $('#twitter').show();
   $('#googlebadge').show();
     $('#empty-container').remove();
  
 /* Window scrollbar normal */
 $("body").css('overflow', 'auto');

 /* Show animation */
$("#box1").replaceWith(divClone.clone());
  $("#box2").replaceWith(divClone1.clone());
  $("#box3").replaceWith(divClone2.clone());
  $("#box4").replaceWith(divClone3.clone());

 e.stopPropagation();
});

/* On animationend : from normal to full screen & full screen to normal */
$("#box1").on('animationend', function(e) {
 /* On animation end from normal to full-screen */
 if(e.originalEvent.animationName == 'inlightbox') {
  $("#close").show();
 }
 /* On animation end from full-screen to normal */
 else if(e.originalEvent.animationName == 'outlightbox') {
  /* Remove fixed positioning, remove animation rules */
  $("#box1").removeClass('in-animation').removeClass('out-animation');
  
  /* Remove the empty container that was earlier added */
  $("#empty-container").remove();

  /* Delete the dynamic keyframe rule that was earlier created */
  $("#lightbox-animations").get(0).sheet.deleteRule(0);
 }
});

#wrapper {
  position: absolute;
  top: 15%;
  left: 25%;
  width: 50%;
  height: 100%;
  z-index: 888;
}

.box {
  position: relative;
  background: #5C97FF;
  overflow: hidden;
  float: left;
  border: 0.1px solid white;
  box-shadow: 0px 0px 10px 1px white;
  margin: 2%;
  z-index: 777;
  opacity: 1;
}

.box:first-child {
  margin-left: 0;
}

.box:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 777;
  opacity: 0.6;
  background-image: url('http://wiki.dpconline.org/images/f/f3/Template_clipboard.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

.box h2 {
  padding: 25px;
  text-align: center;
  z-index: 2;
  position: relative;
  color: #fff;
  top: 0;
  left: 0;
}

article {
  background: #fff;
  padding: 15px;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="box1" class="box box1">

    <h2 class="h24temp-1">I am Template minus One!</h2>
    <article>
      <p>This is a template, works pretty well, right?</p>
              <button id="close">Close</button>
    </article>
  </div>
  <div id="box2" class="box">
    <h2 class="h24temp">I am Template 0!</h2>
    <article>
      <p>This is a template, works pretty well, right?</p>
    </article>
  </div>
  <div id="box3" class="box">
    <h2 class="h24temp1">I am Template One!</h2>
    <article>
      <p>This is a template, works pretty well, right?</p>
    </article>
  </div>
  <div id="box4" class="box">
    <h2 class="h24temp2">I am Template Two!</h2>
    <article>
      <p>This is a template, works pretty well, right?</p>
    </article>
  </div>
</div>

EDIT:
It appears my javascript does not work in snippets. here is the link to my project : https://codepen.io/TechTime/pen/ZKdxQK

Answer 1

If you want a single div per row, you can use a display: block property to each such divs or display: inline-block if you want them one after another.

When one div is clicked, you can hide the other divs, and give the current div a 100% height and width. And when clicking the close button, restore the original states of the divs. Since, you will be use this feature, it will be probably be better to achieve it using adding and removing a class, rather than hardcoding the css into js.

Answer 2

What I had to do was use

$(document).on('click',"#box1" function() { 

instead of

$("#box1").on('click', function() {