javascript multiple time on same page

Question

I need help with a "Show and hide div on link click using jQuery" being used multiple times on the same page. Using this guide https://coding-tips.com/javascript/show-hide-div/ I have added a Show and hide div link to a page that when clicked adds a WHMCS product to the cart using a hidden iframe and the add to cart URL for the product provided by WHMCS. When clicked the link is hidden and a new link with green text and a tick is displayed so the user knows it has been added to the cart.

I have tried changing the class for the second link but nothing I try allows the two links to work separately from each other. I though if each link had it's own class they would work independently of each other but this does not seem to be the case in my tests.

I want to duplicate the link and add it to the same page for each product.

HIDDEN IFRAME:

<iframe style="display:none;" name="target"></iframe>

LINK:

<a href="https://example.org/cart.php?a=add&pid=144" target="target" class="showClick show">ADD TO CART</a> 
<a href="#" class="hideClick hidden">✔ ADD TO CART</a>

JAVASCRIPT:

$(function() {
  $('.showClick').click(function() {
    $('.hidden').show();
    $('.show').hide();
  });
  $('.hideClick').click(function() {
    $('.hidden').hide();
    $('.show').show();
  });
});

CSS:

/* Hide Added To Cart Link */
.hidden {
display:none;
}

/* Make Link Look Like Button */

.showClick.show {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
}

.showClick.show:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

.hideClick.hidden {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
    background-color: green;
}

.hideClick.hidden:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

It works great but I can not get a second link to work for a different product. If you click the first link it changes the hide/show state of the second products link and visa versa. My goal is to have lots of product links on the page that when clicked add different products to the WHMCS cart without the user having to leave the page. Each product link clicked will be green with a tick so the user knows what they have added to the cart.

EDIT

Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"

This is my code:

<iframe style="display:none;" name="target"></iframe>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Answer 1

Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"

This is my code:

 <iframe style="display:none;" name="target"></iframe> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript"> function func(e) { $(e).text('ADDED TO CART'); } </script> <a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Answer 2

Links should have the same css classes then, but you need to use different ids for each link and access to their id's when clicked like this, inside your .on('click') function;

     let id = $(this).attr('id');

Duplication must be done programmatically and when doing that assign different ids & different href attributes eg;

     let products = [
        {
            id: 2,
            link: 'pid=144'
        },
        {
            id: 3,
            link: 'pid=154'
        }
    ];

    for (let i = 0; i < products.length; i++) {
        const element = products[i];
        let strElement = '<a id=' + (i + 1) + '  href="https://example.org/cart.php?a=add&' + element.link+'" target="target" class="showClick show"> Click to Add to Cart </a>';
        // Appending to body element here but if you have a container div, use it's id with a # prefix
        $('body').append(strElement);
    }