JQuery: iterate and dynamically change attr for each link based on the current item id
<p>My JQuery code returns the same value to the link disregarding the current product id </p>

<p>The shopping cart page consist of [i] number of products, each product has its own productId. because the page iterates and it outputs the [i] number of products, I am not able to include the productId inside the wishlist iteration which is also [i] number of wishlists. </p>

<p>So I decided to go with JQuery and select the attributes to change the link for each product so users will be able to click and insert the product to their wishlists. </p>

<p>The final link for each product should be <a href="http://example.com/customer.do?addThisProductToWishList&amp;productID=[i]&amp;wishlistID=[i]" rel="nofollow noreferrer">http://example.com/customer.do?addThisProductToWishList&amp;productID=[i]&amp;wishlistID=[i]</a></p>

<p>I have tried the code below but it keeps iterating and outputs a very long link and only keeps one productID stored to be populated to each product. </p>

<p>JQuery Code </p>

<pre><code>$(".details").each(function() {
            var _href = $(".addThisProductToWishList").attr("href");
                $(".ProductID").each(function(){
                    var _theProductID = $(".ProductID").attr("data-id");
                     $(".addThisProductToWishList").attr("href", _href + '&amp;productId=' + _theProductID + '&amp;wishListID=');
            });
        });
</code></pre>

<p><img src="https://i.stack.imgur.com/1bplF.jpg" alt="Please see this image which describes the final output"></p>

<p><strong>EDIT</strong></p>

<p><strong>HTML CODE</strong></p>

<pre><code>    &lt;input type="hidden" name="wishListID"/&gt;
       &lt;span class="wishListID" data-id="&lt;js:text name="ProductID" /&gt;"&gt;&lt;/span&gt;
        &lt;ul class="dropdown-list"&gt;
                &lt;js:iterate id="wishlists" collection="&lt;%=wishListsCollection.getLists(new Integer(1))%&gt;" &gt;
                   &lt;li class="dropdown-element"&gt;
                        &lt;span data-id="&lt;js:text name="wishList.wishListID"/&gt;"&gt;
                        &lt;js:text name="wishList.wishListName"/&gt;
                         &lt;js:a actionpath="/customer.do?action=addThisProductToWishList" name="product.productId"  class="addThisProductToWishList"&gt;
                            &lt;app:msg key="product.add_to_wishlist" /&gt; &lt;/js:a&gt;
                                            &lt;/span&gt;
                                    &lt;/js:iterate&gt;
                                        &lt;/li&gt;
                                &lt;/ul&gt;
</code></pre>