Multiple Modals demos open same demo everytime?

[jamuk]

can someone help me with why this doesn't work, it keeps opening the demo01 but not demo02.

                   <!-- single work -->
                        <div class="col-md-4 col-sm-6  fashion logo">
                            <a id="demo01" href="#animatedModal" class="portfolio_item"> <img src="img/portfolio/01.jpg" alt="image" class="img-responsive" />
                                <div class="portfolio_item_hover">
                                    <div class="portfolio-border clearfix">
                                        <div class="item_info"> <span>Mockups in seconds</span> <em>Fashion / Logo</em> </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- end single work -->
                        
                        <!-- single work -->
                        <div class="col-md-4 col-sm-6 ads graphics">
                            <a id="demo02" href="#animatedModal02" class="portfolio_item"> <img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
                                <div class="portfolio_item_hover">
                                    <div class="portfolio-border clearfix">
                                        <div class="item_info"> <span>Floating mockups</span> <em>Ads / Graphics</em> </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- end single work -->

<!--DEMO01-->
<div id="animatedModal" class="popup-modal">
    <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
    <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
    <div class="clearfix"></div>
    <div class="modal-content">
        <div class="container">
            <div class="portfolio-padding">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Test01...</h2>
                    <div class="h-50"></div>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                    <br />
                    
                    <br /> <img src="img/portfolio/Bot/final_Bot_Render.jpg" alt="" class="img-responsive" />
                    <br />
                                            <br /> <img src="img/portfolio/Bot/BotRender01.jpg" alt="" class="img-responsive" />
                    <br />
                                            <br /> <img src="img/portfolio/Bot/botConcept.jpg" alt="" class="img-responsive" />
                    <br />
                    
                  <br />
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                    <br />
                    <br /> </div>       
            </div>
        </div>
    </div>
</div>

<!--DEMO02-->
<div id="animatedModal02" class="popup-modal">
    <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
    <div id="btn-close-modal" class="close-animatedModal02 close-popup-modal"> <i class="ion-close-round"></i> </div>
    <div class="clearfix"></div>
    <div class="modal-content">
        <div class="container">
            <div class="portfolio-padding">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Test02...</h2>
                    <div class="h-50"></div>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                    <br />
                    
                    <br /> <img src="img/portfolio/Bot/final_Bot_Render.jpg" alt="" class="img-responsive" />
                    <br />
                                            <br /> <img src="img/portfolio/Bot/BotRender01.jpg" alt="" class="img-responsive" />
                    <br />
                                            <br /> <img src="img/portfolio/Bot/botConcept.jpg" alt="" class="img-responsive" />
                    <br />
                    
                  <br />
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                    <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                    <br />
                    <br /> </div>       
            </div>
        </div>
    </div>
</div>

//animatedModal  JS SCRIPT
$("#demo01,#demo02,#demo03,#demo04,#demo05,#demo06,#demo07,#demo08,#demo09").animatedModal();

[Iaaaaan96]

I have the same issue, the same demo01 opens for all the other boxes..

[saniales]

Hey there, solved by putting this

for (var i = 0; i < 10; i++) {
    $("#demo0" + i).animatedModal({
        modalTarget:"modal-0" + i,
    });
}

instead of this

$("#demo01,#demo02,#demo03,#demo04,#demo05,#demo06,#demo07,#demo08,#demo09").animatedModal();

and putting following HTML

<a id="demo01" href="#modal-01" class="portfolio_item">
    <--- ... --->
</a>

<--- ... --->

<div id="modal-01" class="popup-modal">
    <--- ... --->
</div>

<--- demo02 modal-02 demo03 modal-03 and so on... --->