Encountering a problem when attempting to open multiple popups using identical JavaScript code

I'm trying to create movie information cards, but I am facing an issue with the popups. Only the first popup opens when clicked, despite trying multiple solutions found on this website. I should mention that I am a beginner in JavaScript and encountered difficulties using a for loop to open the popups one by one.

Below is my code (which also utilizes Bootstrap):

Links:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a6bca7bca1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS:

<style>
    // CSS styling here
</style>

HTML:

<div class="row">
    <div class="col-lg-12 ">
        // HTML content here
    </div>
</div>

JavaScript Links:

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a5baa5a5b0a7fbbfa695e4fbe4e3fbe4">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"gt;</script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88c968d968b">[email protected]</a>/dist/js/bootstrap.min.js” integrity=”sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s” crossorigin=”anonymous”></script>

JavaScript Code:

    <script>
        // JavaScript code here
    </script>
javascripthtmlcsspopup

Answer №1

If you want to enhance your understanding, check out this link below Simply copy and paste the link into your browser

link : codepen.io/moo2000/pen/OJXrjxm

Note: Try viewing in fullscreen mode by clicking on the provided button]

: https://i.sstatic.net/plsXf.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

javascripthtmlcssruby-on-rails

CSS Styling to Align Form in Table Cell

I have some old HTML code without a CSS framework, so I'm using tables for layout. My current challenge is trying to horizontally center my form, while keeping the form fields left-aligned. Essentially, I want to achieve the following design: +------ ...

htmlcss

Tips for adjusting the height of an element to accommodate the height of another element

I am facing an issue with a dynamically added div using JS. The div includes an overlay and a contained element that should scroll along with the page if needed. I want to prevent any scrolling within the div itself, which resizes based on its content. The ...

javascriptjqueryhtmlcss

The placement of an element is determined by its size and proportions

I'm experiencing some issues with avatars on my website. When the avatar size is set to 35x35 pixels, everything works fine. However, problems arise when the dimensions exceed 35x35 pixels. I suspect that the problem is related to the "position: abso ...

csslayoutcss-position

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

javascriptjquerycsshtml

The generated div from the Repeater Control is lacking appropriate CSS styling

I have a Repeater Control that is being used to generate div elements. While the DIV elements are successfully generated, the CSS formatting is not appearing correctly. Below is my HTML Code: <asp:Repeater ID="rptr" runat="server"> <Item ...

asp.nethtmlcsstwitter-bootstrap

Strategies for preserving line breaks in a database

I am currently utilizing TypeORM for managing my database with NestJS framework on the server side and Vue.js on the client side. Within the settings, I need to input a large text and ensure that line breaks (\n) are saved in the database. Here&apos ...

javascripttypescriptvue.jsnestjstypeorm

Experiencing a problem with a loop in iMacros/JS?

I have an iMacros/JS script for Facebook that logs into a FB account from a CSV file, then it has a second loop j which sends 20 friend requests from each account. The issue arises when switching accounts and encountering a popup message requiring phone n ...

javascriptimacros

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

$content = fetch_content(); var_dump($content); <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://www ...

phphtmlwordpresstags

Modify the dropdown menu name based on the link that is currently selected

Here is the complete HTML code I have: {% extends "base.html" %} {% block content %} <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a15"& ...

htmlbootstrap-4

Empty results received from MongoDB queries executed within an asynchronous loop

I'm encountering an issue where I have a list of IDs that I need to query Mongo with in a for loop, but it always returns an empty []. Initially, the queries were returning promises, so I switched from using forEach to a standard for loop as shown her ...

javascriptmongodbexpressnpm

Retrieving an auto-generated number on the account dashboard (login portal)

I'm currently working on a login section for my website. I have set up a table with UserID (auto-increment), email, password, and other necessary fields. Despite my efforts, I am facing issues with logging in users and displaying their UserID on the a ...

phphtmlmysqlmysqli

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

When setting a stroke-width: 1 on a <rect> element in SVG, typically a stroke is placed on every side of the rectangle. Is there a way to specify a stroke width on just three sides of an SVG rectangle? ...

htmlsvgvector-graphicsinkscape

Send information from one webpage to another webpage using HTML

Is there a way to transfer data from one HTML file to another? I'm familiar with posting data from HTML to Python and back to HTML. In my HTML file, I have a dictionary obtained from Python using render_to_response('page.html', locals()). ...

javascriptpythonhtml

Decrypting the Connect.sid cookie in Express.js can be accomplished by following these

These are my cookies: connect.sid:s:fRptL0_o-5FBbqqbDluHrSvo4DyKHvcP.6Y57+JkukcncVD/6ANbtojCGkL2yLnnmJgo2n30SnWo The secret code is #@%#&^$^$%@$^$&%#$%@#$%$^%&$%^#$%@#$%#E%#%@$FEErfgr3g#%GT%536c53cc6%5%tv%4y4hrgrggrgrgf4n I attempted to decip ...

javascriptexpress

What is the process for setting the active state for HtmlBodyElement?

I attempted to use the following method: document.querySelector('body').setActive(); However, I encountered an error: TS2339: Property 'setActive' does not exist on type 'HTMLBodyElement'. Any suggestions on how to resolve t ...

htmlangulartypescript

What could be causing the minimal Angular setup with Lexical.dev to malfunction?

I recently tried to follow the guide on It all seemed pretty clear. import { createEditor } from 'lexical'; @Component({ selector: 'app-root', standalone: true, template: ` <div contenteditable="true" #editable& ...

javascriptangulartypescriptlexicaljs

Retrieving data attributes from model within a Backbone view using Underscore template

I have a Backbone.js view that I'm working with: var StreamV = Backbone.View.extend({ tagName: 'div', className: 'stream', events: { }, initialize: function () { this.listenTo(this.model, 'change' ...

javascriptbackbone.jsunderscore.js-templating

The outcome is not displayed in the appropriate section of the text

There seems to be an issue as the console is not displaying the response to the input, such as "the answer is correct" or "the answer is either empty or incorrect". <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</ ...

javascripthtml

Encountered an issue when trying to add content following $http .then()

Hi there, I am currently using AngularJS $http to fetch JSON data. Here is the JSON Data: {"Data":["index":[{"Name":"append_here_1"},{"Name":"append_here_2"}]]} In my App.js file: var app = angular.module('app', []); Request.js: app.service ...

javascriptjqueryhtmlangularjs