Q:

Why are only half the element's classes able to be toggled?

I'm utilizing jQuery's .toggleClass() function to create a favorite button inside several <div> elements, which each has a <a> element, and an <i> element. I'm using 2 icons from Font Awesome which classes I'm toggling back and forth between.
This works perfectly fine as demonstrated from this JSFiddle.
The issue I'm having is when I dynamically generate these elements using a PHP foreach loop only half of the generated element's classes toggle.
HTML :
<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

jQuery :
$(".h-icon").on("click", function(e) {
  e.preventDefault();

  $("i", this).toggleClass("fa-heart fa-heart-o");

  $.ajax({
    url: $(this).prop("href")
  })
  return false;
});

PHP :
<?php

    foreach($array as $row) {

        $favorite = $row['favorite'];

        if($favorite == false) {

            echo '<div><a class="h-icon" href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></div>';

        }
        else {

            echo '<div><a class="h-icon" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></div>';

        }

    }

?>

A:

When you dynamically add more elements you need to register the click listener again, or use a dynamic event listener.
$(document).on("click", ".h-icon", function(e) {
    // ...
});

Working example.

