jQuery mouseenter() function not working as expected

I'm trying to make a div. when hovering on it (I'm using mouseenter and mouseleave jquery function) the div change its size and when click on it it should show an other div. for that i'm using click function. it works some time and some time don't. here is my jquery code.

$(document).ready(function() {
  $('.box').mouseenter(function() {
    $('.mainBox').css('font-size', '32px');
    $('.box').css('overflow', 'auto');
    $('.box').click(function(e) {
      e.preventDefault();
      console.log('clicked');
      $('.box2').css('display', 'block');
    });
  });
  $('.mainBox').mouseleave(function() {
    $('.mainBox').css('font-size', '16px');
    $('.box').css('overflow', 'auto');
    $('.box').css('background-color', 'white');
  });
}); // End of document ready function

body {
  padding: 0;
  margin: 0;
  background-color: lightgray;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.mainBox {
  margin: auto;
  margin-top: 20px;
  border: 1px solid;
  background-color: white;
  padding: 10px;
  width: 80%;
  resize: both;
  overflow: auto;
  transition: font-size .5s;
}

.dBox {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 20px;
  border: 1px solid gray;
  width: 80%;
  padding: 20px;
  background-color: gainsboro;
}

.box {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid white;
  padding: 20px;
  background-color: gainsboro;
}

.box2 {
  border: 1px solid gray;
  padding: 20px;
  background-color: gainsboro;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
  <div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
  <div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>

</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>

<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
  light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

Solution

You are chaining multiple event binding. in your code, every time that the mouseenter is triggered, a new callback is added to the click event.

$(document).ready(function() {
  $('.box').mouseenter(function() {
    $('.mainBox').css('font-size', '32px');
    $('.box').css('overflow', 'auto');
  });
  $('.mainBox').mouseleave(function() {
    $('.mainBox').css('font-size', '16px');
    $('.box').css('overflow', 'auto');
    $('.box').css('background-color', 'white');
  });
  $('.box').click(function(e) {
      e.preventDefault();
      if($('.box2').css('display') === 'block'){
        $('.box2').css('display', 'none');
      } else {
        $('.box2').css('display', 'block');
      }
    });
}); // End of document ready function

body {
  padding: 0;
  margin: 0;
  background-color: lightgray;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.mainBox {
  margin: auto;
  margin-top: 20px;
  border: 1px solid;
  background-color: white;
  padding: 10px;
  width: 80%;
  resize: both;
  overflow: auto;
  transition: font-size .5s;
}

.dBox {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 20px;
  border: 1px solid gray;
  width: 80%;
  padding: 20px;
  background-color: gainsboro;
}

.box {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid white;
  padding: 20px;
  background-color: gainsboro;
}

.box2 {
  border: 1px solid gray;
  padding: 20px;
  background-color: gainsboro;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
  <div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
  <div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>

</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>

<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
  light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>