изменить цвет заголовка при наведении на кнопку

Сразу к делу – как изменить заголовок в определенной карте а не во всех?

Вот если в вкратце!

var buyNow = $  ('.buy-now'),     cardHeading = $  ('.card-heading');      buyNow.mouseover( function (){   cardHeading.css('background-color', 'red'); })
.shop-cards{   width: 100%;   height: auto;   display: flex;   flex-flow: row wrap;   justify-content: space-around;   margin-bottom: 87px; } .card{   width: calc(100% / 3);   width: 370px;   height: 494px;   position: relative;   display: flex;   flex-direction: column;   flex-wrap: nowrap;   margin-bottom: 20px;   border-radius: 10px;   border: 1px solid inherit;   background-color: #fff;   box-shadow: 0 9px 50px 0 rgba(0, 0, 0, 0.1); } .card-heading{   width: 100%;   height: calc(100% / 3.4);   display: flex;   align-items: center;   justify-content: center;   text-transform: uppercase;   color: #fff;   background-color: $  primary-color;   border-radius: 8px 8px 0 0;   border: 1px solid $  primary-color; } .card-body{   width: 100%;   height: 100%;   box-sizing: border-box;   padding: 50px 70px;   display: flex;   flex-flow: column nowrap;   text-transform: uppercase;   color: $  text-color;   font-size: 18px;   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="shop-cards"> 				   <div class="card">     <div class="card-heading">       <span class="currency">$  </span><span class="price"> 49 <span class="period">/month</span></span>     </div> <!-- //card-heading -->      <div class="card-body">       <span class="entery-date border">entery date: mon - fri</span>       <span class="entery-time border">entery time: 8a.m - 8p.m</span>       <span class="advicer">nutrition advicer: no</span>        <button class="btn buy-now" type="submit">Buy now</button>     </div> <!-- //card-body -->   </div> <!-- //card -->    <div class="card">     <div class="card-heading">       <span class="currency">$  </span><span class="price"> 49 <span class="period">/month</span></span>     </div> <!-- //card-heading -->      <div class="card-body">       <span class="entery-date border">entery date: mon - fri</span>       <span class="entery-time border">entery time: 8a.m - 8p.m</span>       <span class="advicer">nutrition advicer: no</span>        <button class="btn buy-now" type="submit">Buy now</button>     </div> <!-- //card-body -->   </div> <!-- //card -->    <div class="card">     <div class="card-heading">       <span class="currency">$  </span><span class="price"> 49 <span class="period">/month</span></span>     </div> <!-- //card-heading -->      <div class="card-body">       <span class="entery-date border">entery date: mon - fri</span>       <span class="entery-time border">entery time: 8a.m - 8p.m</span>       <span class="advicer">nutrition advicer: no</span>        <button class="btn buy-now" type="submit">Buy now</button>     </div> <!-- //card-body -->   </div> <!-- //card -->  </div> <!-- //shop-cards -->