Павел

<div class="image">
 <img class="img">
 <img class="hoverImg">
</div>

.image .hoverImg {
 display: none;
}
.image:hover .img {
 display: none
}
.image:hover .hoverImg {
 display: block
}

function numbers() {
$a = array();
for($i = 1; $i <= 10; $i++) {
    $a[] = $i;
  }
  return $a;
}
print_r(numbers());

function () {
  return['1 2 3 4 5 6 7 8 9 10'];
}

1) element.addEventListener('click',  - $(element).on('click',
2) (event.target.classList.contains('button_card_text') - $(event.target).hasClass('button_card_text') //вроде должно быть ок
3) this.querySelector('.front').classList.contains('active') - $(this).find('.front').hasClass('active');
4) event.target.classList.remove('active'); - $().removeClass()

5) for (let i = 0; i < document.querySelectorAll('.card').length; i++) {
      clickAnimation(document.querySelectorAll('.card')[i]);
}
$('.card').each(function(){
   clickAnimation($(this))
})

<input type="hidden" value="<?php the_permalink(); ?>" name="url">

<input type="hidden" value="" name="url" class="url">

document.querySelector('.url').value = location.href;

wp_enqueue_script( 'sajo-slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(), 1.0, true );