JavaScript doesn't work properly on elements added by .html() : <p>I got a little issue with my JavaScript and jQuery fadeIn(), html() and fadeOut() methods.</p>

<p>This is my code below.</p>

<p>My HTML       </p>

<pre><code>&lt;div class="fluid-container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col text-center"&gt;
      &lt;ul class="list-inline pb-6 border-bottom d-inline-block w-75"&gt;
        &lt;button class="list-inline-item circle-button mr-3" type="button" name="button"&gt;1&lt;/button&gt;
        &lt;li class="list-inline-item mr-5"&gt;Password&lt;/li&gt;
        &lt;button class="list-inline-item circle-button mr-3 grey-btn" type="button" name="button"&gt;2&lt;/button&gt;
        &lt;li class="list-inline-item half-opacity"&gt;Industries&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;

        &lt;div id="ReplCont"&gt;
          &lt;span class="h5 d-inline-block mt-4 mb-5"&gt;Hey there Maxx, welcome to Flairr!&lt;br&gt;To get started, create a password for yourself.&lt;/span&gt;
          &lt;br&gt;
          &lt;input class="mb-6 ml-5 mr-3 rounded w-20" type="text" name="password" value="" placeholder="Password" id="pass-input"&gt;
          &lt;img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images"&gt;
          &lt;br&gt;
          &lt;input class="mb-5 ml-5 mr-3 rounded w-20" type="text" name="confirm password" value="" placeholder="Confirm Password" id="conf-pass-input"&gt;
          &lt;img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images"&gt;
          &lt;br&gt;
          &lt;button class="mb-2 half-opacity" type="button" name="button" id="cont-btn"&gt;Continue&lt;/button&gt;
        &lt;/div&gt;

      &lt;div id="empty-bg"&gt;
        &lt;!-- Must be empty --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JAVASCRIPT</p>

<pre><code>$(document).ready(function(){
// INDUSTIES BUTTONS
// Toggle active
$('.industry-btn-new').click(function(){
  if ($('.industry-btn-chsen').length &gt;= 3) {
    if ($(this).hasClass('industry-btn-chsen')) {
      $(this).toggleClass('industry-btn-chsen');
    }
  }else {
    $(this).toggleClass('industry-btn-chsen');
  }
})
// Get started button
$('.industry-btn-new').click(function(){
  if ($('.industry-btn-chsen').length &gt;= 3) {
    $('#get-started').removeClass('half-opacity');
  }else if ($('.industry-btn-chsen').length &lt;= 3) {
    $('#get-started').addClass('half-opacity');
  }
})
// INPUTS COMPARISON
$('#conf-pass-input, #pass-input').keyup(function(){
 if ($('#pass-input').val() === $('#conf-pass-input').val() &amp;&amp; $('.w-20').val().length &gt;= 1) {
    $('.flairr-tick-resize').removeClass('vis-hidden');
    $('#cont-btn').removeClass('half-opacity');
    $('.w-20').removeClass('red-input');
  }else if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length &lt;= 1) {
    $('.flairr-tick-resize').addClass('vis-hidden');
    $('#cont-btn').addClass('half-opacity');
    $('.w-20').removeClass('red-input');
  }
});
// CONTINUE BUTTON ACTIONS
  $('#cont-btn').click(function(){
    if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length &lt;= 0) {
    $('.w-20').addClass('red-input');
  }else {
      $('#ReplCont').fadeOut('slow', function() {
         $('#ReplCont').html(`&lt;span class="h5 d-inline-block mt-4 mb-5"&gt;Alright Maxx,&lt;br&gt;choose up to 3 industries you're interested in.&lt;/span&gt;
      &lt;br&gt;
      &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Marketing&lt;/button&gt;
      &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Finance&lt;/button&gt;
      &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Business Development&lt;/button&gt;
      &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Engineering&lt;/button&gt;
      &lt;br&gt;
      &lt;div class="pb-5 mb-4 border-bottom w-75 text=center mx-auto"&gt;
        &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Design&lt;/button&gt;
        &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Computer Science&lt;/button&gt;
        &lt;button class="m-2 industry-btn-new" type="button" name="button"&gt;Data Science&lt;/button&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;button class="mb-2 half-opacity" type="button" name="button" id="get-started"&gt;Get started&lt;/button&gt;`);
      $('#ReplCont').fadeIn('slow');
    });
   }
 })
})
</code></pre>

<p>I'm replacing content inside DIV with ID ReplCont when click on continue button. The problem is after I replace content inside ReplCont DIV my JS for new content doesn't work. 
But if I put it manually then and refresh the page then JS works fine.</p>

<p>I have some thoughts. Maybe JS loads on page load and after setting new HTML with jQuery I have to reload JS somehow. But I'm no sure. Please help friends!</p>

<p>Thank you in advance!</p>
