$('#button1').hover(function () {
$('#card1').fadeIn();
}, function () {
$('#card1').fadeOut();
});
$('#button2').hover(function () {
$('#card2').fadeIn();
}, function () {
$('#card2').fadeOut();
});
$('#button3').hover(function () {
$('#card3').fadeIn();
}, function () {
$('#card3').fadeOut();
});
const getCard = button => $(`#card${button.id.match(/\d+/).pop()}`);
$('[id^="button"]').hover(
e => getCard(e.target).fadeIn(),
e => getCard(e.target).fadeOut(),
);const $buttons = $('[id^=button]').hover(function(e) {
this.eq($buttons.index(e.target))[e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut']();
}.bind($('[id^=card]')));