javascript — Почему переключается только половина классов элемента?

Я использую JQuery’s .toggleClass () функция для создания любимой кнопки внутри нескольких <div> элементы, каждый из которых имеет <a> элемент и <i> элемент. Я использую 2 иконки из Font Awesome, между которыми я переключаюсь.

Это прекрасно работает, как показано на этом JSFiddle.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я динамически генерирую эти элементы, используя цикл foreach PHP, переключается только половина классов сгенерированного элемента.

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>';

}

}

?>