call javascript function on div with same class

I have a javascript function i would like to call on multiple div with same class but when i call the function and hover over the first div the function is called on the other div with same class

function flip() {    $('.front').css("display", "none");    $('.back').fadeIn();}function flipBack() {    $('.front').fadeIn();    $('.back').css("display", "none");}

html

<div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)"><div class="front"><i class="typcn typcn-globe"></i><h3>Nigeriaeexport</h3><p>Your one stop export solution platform for everything export.</p></div><div class="back">                    Want to work</div></div><div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)"><div class="front"><i class="typcn typcn-location-arrow"></i><h3>XPT Logistics</h3><p>The top Company in terms of Export Logistics in Nigeria</p></div><div class="back">                    Want to work</div></div>    

What I want is when mouseenter the .subMainSlate the .frontfadeOut() and .backfadeIn().

Thanks.