I'm building a web app, where in one page I have 6 divs that are generated dynamically, each div contain a hidden child div and a button, I want when the user click on the button of a given div, a dialog appears with the child of that div as a content .
Here's an MCVE on JS Fiddle (run the snippet to see the actual code) to help you understand (My code is very large and I can't share it for privacy reasons so I recreated the problem I'm facing .) :
<iframe width="100%" height="300" src="//jsfiddle.net/j7bbmLxn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
First problem. You have same ids for all buttons.
button id = "showMovieInfo2"
Second you have problem with dialog. You need to set ids for each dialog in order to work.
here is complete example
Hope this helps.