why jQuery functions don’t work together?

I’m new to jQuery, my functions adds class active to buttons when different inputs have value. However, only one function out of two works at once. Both functions work just fine separately. Maybe I am missing something? I writing these functions directly on html file without document.ready, but it didn’t solve the issue. Is there a way to make both of these functions work at the same time?

$(document).ready(function() {
  setEvents();
  $('.search_box_container').trigger('keyup');
});

function setEvents() {
  $('.search_box_container').on('keyup', function() {
    var $this = $(this),
      search_box_name = $this.find('.search_box_name').val().trim(),
      search_box_id = $this.find('.search_box_id').val().trim();
    if (search_box_name && search_box_id) {
      $('.go_back_right').addClass('active');
    } else {
      $('.go_back_right').removeClass('active');
    }
  });
};



$(document).ready(function() {
  setEvents();
  $('.didesnis_input').trigger('keyup');
});

function setEvents() {
  $('.didesnis_input').on('keyup', function() {
    var $this = $(this),
      search_box = $this.find('.search_box').val().trim();
    if (search_box) {
      $('.go_back_right_create').addClass('active');
    } else {
      $('.go_back_right_create').removeClass('active');
    }
  });
}

.go_back_right.active {
  background-color: rgba(255, 255, 255, 0.05);
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 2s;
}

.go_back_right_create.active {
  background-color: red;
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 2s;
}

<form action="room.html">
  <div class="search_box_container">
    <input class="search_box_name" id="username" for="username" name="username" type="text">
    <input class="search_box_id" id="roomNamehtml" name="room" type="text">
  </div>
  <button class="go_back_right" type="submit" onclick="joinRoom()">
      </button>

</form>

<form action="room.html">
  <div class="didesnis_input">

    <input class="search_box" id="search_bar username" name="username" type="text">
  </div>
  <select hidden name="room" id="room">
  </select>
  <button class="go_back_right_create" type="submit" onclick="createRoom()">
        </button>
</form>

Answer

Maybe you can give different names to functions since the second one overrides the first one?

Always define the functions before you use them if you don’t use a bundler.

Also, you don’t need to define document.ready multiple times.

function setEventsForInput() {
  $('.didesnis_input').on('keyup', function() {
    var $this = $(this),
      search_box = $this.find('.search_box').val().trim();
    if (search_box) {
      $('.go_back_right_create').addClass('active');
    } else {
      $('.go_back_right_create').removeClass('active');
    }
  });
}

function setEventsForBoxContainer() {
  $('.search_box_container').on('keyup', function() {
    var $this = $(this),
      search_box_name = $this.find('.search_box_name').val().trim(),
      search_box_id = $this.find('.search_box_id').val().trim();
    if (search_box_name && search_box_id) {
      $('.go_back_right').addClass('active');
    } else {
      $('.go_back_right').removeClass('active');
    }
  });
};


$(document).ready(function() {
  setEventsForInput();
  setEventsForBoxContainer();
});