YavaDev

Вот два плагина MixItUp и Isotope.

Дописал несколько строк в конце CSS

Если в стилях у блока стоит display: none, тогда jQuery по умолчанию дает этому блоку display: block.
Что бы заставить jQuery дать блоку display: flex нужно для начала прочитать документацию.
Ну а после сделать нечто такое:

$('.popup').fadeIn({
  start: function() {
    $(this).css('display','flex');
  }
});

Примерно так

Это должно помочь

.catalog-dropdown:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 45px;
}

Это если catalog-dropdown открывается вниз.
Суть в том, что с помощью before (или after) надо просто закрыть дыру. А так как before, в данном случае, является частью catalog-dropdown, то ховер не исчезнет.

Возможно проблема в том, что ваш обработчик cобытий просто не работает с новыми элементами, который были только, что добавленны на страницу.
Попробуйте заменить эту строку в js коде:
$("#form, #form2, #delete").submit(function (e) {
на

$(document).on("submit", "#form, #form2, #delete", function (e) {