<div id="button">
  <button id="display-none" class="btn btn-primary">Toggle Diplay None</button>
</div> 

<div id="parent">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
</div>
#box-1 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#box-2 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#box-3 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#parent {
  text-align: center;
}
#button {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 50px;
}
let display_none_count = 1;

$('#display-none').click(function() {
  display_none_count++
  if(display_none_count % 2 == 0) {
    $('#box-2').css(
      { 
        display: "none"
      });
      $('#display-none').text('Toggle Display None On');
  } else {
    $('#box-2').css(
      { 
        display: "inline-block"
      });
      $('#display-none').text('Toggle Display None Off');
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js