Антон

Вы удаляете и добавляете этот класс этому элементу снова. Скорее всего, Вы хотите при клике удалять везде класс activ, а нажатому - добавлять. Вот, на Вашем примере написал код:

let $form = $('#update_products');

$form.on('submit', function (event) {
    event.preventDefault();

    let formData = new FormData($form[0]);

    $.each($('.product-image-upload')[0].files, function (j, file) {
        formData.append('images[' + j + ']', file);
    });

    $.ajax({
        url: '/UpdateProduct',
        type: 'post',
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
            console.log(data);
        }
    });
});

И в input добавить multiple:

<input type="file" class="product-image-upload" accept="image/*" name="images[]" id="photo1" multiple>

В контроллере:

if ($request->hasFile('images')) {
    $files = $request->file('images');
}

Вот, на Вашем примере сделал.

Вот, сделал для Вас пример.

Html:
<div class="block">Текст</div>
Css:

.block {
   background: gray;
   color: #FFF;
   cursor: pointer;
   transition: 3s;
}

.block:hover {
   background: blue;
}

Цвета и прочие стили уже сами сделаете под себя. Ключевое свойство здесь - transition. И его значение можете поменять.

UPD: А для svg изображений/иконок вот такой код:

svg {
  fill: gray;
  transition: fill 2s ease;
}

svg:hover {
  fill: blue;
}

Это версионность. Если происходят какие-то изменения в js или css, то им потом меняют эту версионность, чтобы браузеры подтягивали актуальные стили/скрипты, а не из закешированных.

Потому что сортировка идёт не так, как Вам нужно. Работает так, что 4 будет после 10, так как сортировка идёт по алфавиту (элементы являются строками, а не числами). В таком случае 10 будет до 4.

if($(this).attr('data-role') == 'disabled')

В общем, всему виной был класс .ui-selectable-helper, который в jquery-ui.css находится. Этот класс используется для видимости выделения элементов мышкой. Вместе они как-то конфликтовали. Поэтому решил вопрос небольшой хитростью:

.ui-selectable-helper {
   margin-left: 1px;
}

Теперь выделение, грубо говоря, не наслаивается на место клика, что позволяет работать и одному действию, и другому.

Нашёл вот такой вот способ - stackoverflow.com/questions/2335553/jquery-how-to-...
Грамотно и корректно работает.

Добрый день!
Попробуйте использовать API Page Visibility.

Потому что у Вас обработчик клика в обработчике клика.