Question:

What are the steps to add a popup in JavaScript?

Let us check to see if I genuinely comprehend the situation. It looks that the way you are binding the click event to individual buttons is related to the source of the issue with your code. When the page loads and the buttons are dynamically added to the document object model (DOM), the click event handler that you configured in $(document) will be triggered. These additional elements will be ignored by ready().

The use of event delegation offers a solution to this issue. By binding the event in this way, you are telling it to only respond to events that emanate from particular child elements—in your case, the buttons—and binding it to a static parent element, which is the element that exists upon page load. It is common practice to select the $(document) object as the parent element; however, it is typically more effective to select a more nearby static parent if it is possible to do so.

Here's how you can modify your code:

function displaySortedData() {

var sortedJsonData = jsonData.sort(function (a, b) {

return parseFloat(a.copay.replace(/[^0-9.-]+/g, "")) - parseFloat(b.copay.replace(/[^0-9.-]+/g, ""));

});

$('#externalPharmacyList').empty();

sortedJsonData.forEach(function (item, index) {

var fullAddress = item.address1 + " " + item.address2 + " " + item.city + " " + item.state + " " + item.zipCode;

var listItemHtml = `

<li>

${item.pharmacyName}

<small>${fullAddress}</small>

</div>

${item.quantity} ${item.drugName}

</div>

${item.copay}

</div>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="margin-left:25px">Use BidRx Card</button>

</div>

<li>

<span style="font-weight: 600; font-size:13px; display: block; padding: 25px 20px 0px 20px;">Get your own BidRx "Prescription Savings Card" sent direct to your mobile. Show card to any of the pharmacies listed below to get instant savings.</span>

</div>

</div>

</div>

</li>

</div>

</li>`;

$(listItemHtml).hide().appendTo('#externalPharmacyList').delay(index * 300).fadeIn(500);

});

}

$(document).ready(function () {

// ... your existing code ...

// Event delegation for dynamically added buttons

$('#externalPharmacyList').on('click', '.btn-primary', function () {

// Get the corresponding card section

var cardSection = $(this).closest('.b-m-pharmacy-det').next('.collapse');

// Toggle the visibility of the card section

cardSection.collapse('toggle');

});

In this revised code, the click event is bound to #externalPharmacyList, which is assumed to be a static parent element. The event will only be triggered when a child element matching the selector .btn-primary is clicked. This way, even buttons added to the DOM after the initial page load will have the correct event handler applied to them.

>Why VSCode indicate an error on using {{ }}?

>Fix the python-decouple issue in Django

>Address the N+1 problem in Django with prefetch

>Know everything about AWS Resource Explorer: Full Guide

>Reasons why you cannot ping your AWS EC2 instance: How to fix it

>AWS API Gateway: Ways to do REST API Versioning

>4 easy ways to select an AWS Profile when using Boto3 to connect to CloudFront

>How to use Wildcards to ‘cp’ a File Group with AWS CLI

>AWS EFS vs EBS vs S3: What are the best AWS storage options