On Collection pages, usually the first variant is displayed for each product. Therefore each item has a unique product-id on collection pages. However few custom themes display each variant as a separate item on collection pages. In such cases, there are multiple items corresponding to each product-id.
In such cases, the code for collection pages needs to be modified slightly. You need to replace the liquid variable product.variants.first.id with variant.id.
Below is the original code:
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
For collection pages, the above code gets modified to:
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ variant.id }}"></span>