Switch fontawesome icon on click, not working

Question

I need a fontawesome icon to change to another fontawesome icon when clicked. I have an "empty" heart icon and it needs to change to a "full heart" once it's clicked. I've searched for different JS scripts but none seem to work, so I'm clearly doing something wrong, but can't tell what.

EDITION I forgot to mention, and I apologize for it, that one icon should take over the other. Basically first I'll see the "empty" heart in grey. When hove, the empty heart should go green (just the borders), once it has been clicked, then the heart turns "full" and green.

$('.heart-toggle-empty').click(function() {
  $(this).find('i').toggleClass('fas fa-heart')
});
$('.heart-toggle-full').blur(function() {
  $(this).find('i').toggleClass('far fa-heart')
});

.product-icon-heart,
.product-icon-heart-full {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  color: #D6D4D4;
  cursor: pointer;
}

.product-icon-heart:hover,
.product-icon-heart-full:hover {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  color: #8ABE57;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class="col-12 product-icons">
  <div class="col-4 d-inline-block product-icon-heart mr-0">
    <a class="heart-toggle-empty">
      <i class="far fa-heart"></i>
    </a>
  </div>
  <div class="col-4 inline-block product-icon-heart-full mr-0">
    <a class="heart-toggle-full">
      <i class="fas fa-heart"></i>
    </a>
  </div>
</div>

Answer 1

Ok, here you go. I had to rewrite a bit of the code to get what you wanted, but it works now.

$('.heart-toggle').click(function() {
  $(this).find('i').toggleClass('fas far');
});

.product-icon-heart {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
}
.product-icon-heart .heart-toggle {
  color: #D6D4D4;
}
.product-icon-heart .heart-toggle .fas {
  color: #8ABE57;
}
.product-icon-heart .heart-toggle:hover {
  color: #8ABE57;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class="col-12 product-icons">
  <div class="col-4 d-inline-block product-icon-heart mr-0">
    <a class="heart-toggle" href="#">
      <i class="far fa-heart"></i>
    </a>
  </div>
  <div class="col-4 inline-block product-icon-heart mr-0">
    <a class="heart-toggle full" href="#">
      <i class="fas fa-heart"></i>
    </a>
  </div>
</div>