I've got few buttons inside div. The thing is, i need to display various content depends what value is attached to it's attribute "link", after clicking. When the button is clicked, function picks a value inside "link" attribute and if it's the same as predefined value, displays adequate content. 
New displayed buttons, however, do not work at all. They work only once. I read it's good to use '.on' instead of '.each' but I have no clue how to implement this into my code.
This is how it looks:

```js
$(document).ready(function() {
  console.log("loaded");

  //default hide fnc
  function hide_at_start() {
    $.each([arr_buttons, arr_inputs], function() {
      $.each(this, function() {
        $(this).hide();
      });
    });
  }

  //Show me all
  function showall() {
    $.each(arr_buttons, function(i) {
      $(this).delay(interval * i).show(ftime);
      console.log("displayed");
    });
    setTimeout(function() { //after some time
      $.each(arr_inputs, function(i) {
        $(this).delay(interval * i).show(ftime);
        console.log("displayed");
      });
    }, half_ftime);
  }
  //Hide all
  function hideall() {
    $.each(arr_buttons, function(i) {
      $(this).delay(interval * i).hide(ftime);
      console.log("hid");
    });
    setTimeout(function() {
      $.each(arr_inputs, function(i) {
        $(this).delay(interval * i).hide(ftime);
        console.log("hid");
      });
    }, half_ftime);
    setTimeout(function() {
      $.each(content_div, function(i) {
        $(this).delay(interval * i).fadeOut(ftime);
      });
    }, half_ftime);
  }

  //Vars
  var ftime = 400; //fading time
  var half_ftime = ftime / 2; //half fading time
  var interval = 75; //fading interval
  var arr_buttons = $.makeArray($("#middlecontainer .button-item"));
  var arr_inputs = $.makeArray($("#middlecontainer input"))
  //Selectors
  var middle = $('.replaceme');
  var content_div = $("#middlecontainer div");
  //starting point
  hide_at_start();
  showall();
  //..........................................
  //Contents
  var mailer = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">Hajduk Mailer</button><button class="button-item" link="doors">Doors</button><button class="button-item" link="transport">Transport</button><button class="button-item" link="checker">Checker</button></div>';
  var doors = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'
  var transport = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'
  var checker = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'

  // Why new replaced buttons do not work after clicking??? 
  $(".button-item").each(function() {
    $(this).click(() => {
      var link = eval($(this).attr("link"));
      hideall();
      setTimeout(function() {
        middle.replaceWith(link);
      }, ftime);

    });
  });

  //Is it becouse i need to use '.on' insteed of each for new replaced, appeared elements (buttons)? How???

  /* $(document).on('click', '.button-item', function(e) {
    console.log('ok');
    var link = eval($(this).attr("link"));
    hideall();
    setTimeout(function(){
      middle.replaceWith(link);
  },  ftime);
    }); */

});
```

```css
body {
  font-family: 'Ubuntu', sans-serif;
}

p,
span {
  font-family: 'Ubuntu', sans-serif;
}

h1,
h2,
h3 {
  font-family: 'Leckerli One', cursive;
}

h2 {
  font-size: 2.5rem;
}

a {
  color: rgb(0, 0, 0);
  background: white;
}

a:hover {
  color: rgb(255, 0, 0);
  text-decoration: none;
}

a:visited {
  color: brown;
}

.fullp {
  position: relative;
  background: red;
  min-height: 100%;
  height: 100vh;
}

.middlecontainer {
  width: 80%;
  position: relative;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
}

.p15 {
  padding: 1.5rem;
}

.m15 {
  margin: 1.5rem;
}

.bg-a {
  background: blue;
}

.bg-b {
  background: aquamarine;
}

.bg-c {
  background: yellow;
}

.button-item {
  width: 7rem;
  padding: 5px;
  margin: 7px;
  height: 7rem;
  border: solid 5px white;
  border-radius: 10px;
  background: rgb(221, 221, 221);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  text-shadow: 1px 1px 5px rgb(255, 255, 255);
  font-weight: bold;
  color: rgb(51, 51, 51);
  transition: background .35s ease-in-out;
  -webkit-transition: background .35s ease-in-out;
  -webkit-transition-duration: 0.35s;
  /* Safari */
  transition-duration: 0.35s;
  transition-timing-function: ease-out;
}

.button-item:hover {
  background: rgb(255, 255, 255);
}

.button-item:active {
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.75);
  position: relative;
  top: 5px;
}

.item {
  padding: 10px;
}

.title {
  color: rgb(235, 235, 235);
  text-shadow: 1px 1px 20px black;
  padding: 2rem;
}

.title h1,
h2 {
  text-decoration: underline;
}

.title p {}

.signature {
  position: fixed;
  border: solid 3px white;
  border-radius: 10px;
  background: white;
  line-height: 1.2;
  padding: 5px;
  margin: auto;
  font-size: 0.8rem;
  bottom: -15px;
  left: 20%;
  right: 20%;
  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.425);
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="pl">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Fonts & Bootstrap CSS -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Oswald:300,400,700&amp;subset=latin-ext" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="style/style.min.css">
  <link href="https://fonts.googleapis.com/css?family=Leckerli+One|Ubuntu" rel="stylesheet">
  <!-- Optional JavaScript -->
</head>

<body>
  <section id="dashboard" class="fullp">
    <div class="container">
      <div class="row">
        <div class="col-12 d-flex justify-content-center title">
          <h2>FirePlatform</h2><br>
        </div>
      </div>
    </div>
    <div class="middlecontainer" id="middlecontainer">
      <div class="replaceme">
        <div id="main" class="row d-flex justify-content-center flex-wrap">
          <button class="button-item" link="mailer">Mailer</button>
          <button class="button-item" link="doors">Doors</button>
          <button class="button-item" link="transport">Transport</button>
          <button class="button-item" link="checker">Checker</button>
        </div>
      </div>

  </section>

  <!-- Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>
```

Take a look on 64 line. [**JSFIDDLE here**](https://jsfiddle.net/coconutcake/kreq026n/)
Thanks in advance.