jQuery modal displays random info every time the 'see more' button gets pressed

I’m getting data from an API, I was able to display on the browser as an individual tile (image, names, phone number, …). I have a jQuery modal in it so when press: “get more info”, it’ll popup a window. This is where my problem starts: Let’s say I get 4 tiles, and if I want to get more info from tile 2, the modal will popup and it’ll give me the info from tile 1. If I press another tile, I’ll get info from tile 2, and so on. How can I make sure that when I want to get info from an specific tile, i’ll get the right info when the popup modal comes up?

I attach the info on codepen
Thanks for the advice
Use zip Code 80015

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share all their code for a particular project via codepen / jsfiddle.

Without seeing all the code and how you are currently implementing the click event handlers with respect to anchor with the “more info” text , it is difficult to give you further advice on what to do.

Happy coding :slight_smile:

Thank you for the advice. Here I attach the code

Sorry for the late response, but it is the weekend.

The reason your “more info” links to not open the correct modal, is because you have assigned the all the divs with class=“modal” the exact same id (ex1). Through your document ids are supposed to be unique. The anchor tags with class=“modal-info” have their href set equal to the same value ( again ex1 ). This causes unexpected results when one of them is clicked. To resolve the issue, you can simply give each modal a unique id. I suggest the current variable i value and then the corresponding anchor element should have the same “ex” plus i value also. This should make your modals work like you expect.

You have many other instances in your code where you assign the same id to different elements, which you should fix in case you need to target those elements later.

1 Like

Awesome!!! it worked. Thank you for the help. D