I want to create a function that can switch favorites per row using a star icon.

avaScript
function registerFavorite(row, isFavorite) {
  // Get the favorite column.
  var favoriteColumn = row.find(".favorite-column");

  // Get the icon element.
  var iconElement = favoriteColumn.find(".icon");

  // If the favorite status is not yet set, set it to the default value.
  if (isFavorite === undefined) {
    isFavorite = false;
  }

  // Change the icon according to the favorite status.
  if (isFavorite) {
    iconElement.attr("class", "fa fa-heart");
  } else {
    iconElement.attr("class", "fa fa-heart-o");
  }

  // Send an Ajax request to update the favorite status in the database.
  $.ajax({
    url: "/api/favorites",
    method: "POST",
    data: {
      id: row.data("id"),
      isFavorite: isFavorite,
    },
  });
}

$(document).on("click", ".favorite-column", function() {
  // Get the current favorite status.
  var isFavorite = $(this).find(".icon").hasClass("fa-heart");

  // Register the favorite with the opposite status.
  registerFavorite($(this).closest("tr"), !isFavorite);
});

.favorite-column {
  cursor: pointer;
}

.fa-heart {
  color: red;
}

.fa-heart-o {
  color: black;
}