Tenho várias imagens em uma página. Cada imagem tem um ID associado a ela. Para cada imagem, desejo que o usuário possa clicar em um coração. Quando o usuário clica em um coração, o ícone de coração aberto deve ser substituído pelo ícone de coração fechado para apenas essa imagem. Da mesma forma, quando um usuário não ouve uma imagem, o ícone de coração fechado deve ser substituído pelo ícone de coração aberto.

Estou tendo problemas para implementar isso corretamente no javascript. Como eu faria referência apenas ao ícone que precisa ser alterado? Algum conselho sobre como implementar isso?

Javascript

<script >
  function wantToGo(id) {
    console.log(id);
  }

  function dontWantToGo(id) {
    console.log(id);
  }
</script>

HTML

<div class='col-md-4'>
  <img src = "http://i.imgur.com/gwzxVWi.jpg ">
  <!-- Open heart icon -->
  <a href = "#" onClick = "wantToGo(4)"><i class="fa fa-heart-o"></i></a>
  <!-- Closed heart icon -->
  <a href = "#" onClick = "dontWantToGo(4)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>

<div class='col-md-4'>
  <img src = "http://i.imgur.com/Ohk2jxC.jpg ">
  <a href = "#" onClick = "wantToGo(5)"><i class="fa fa-heart-o"></i></a>
  <a href = "#" onClick = "dontWantToGo(5)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>