Opening up multiple JQuery modal

I’m trying to open multiple modal windows on a page using the same class for each modal. The divs are generated dynamically (working within Magento)

JQuery

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup modal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('.popup-modal'));
            
            $(".click-me").on('click',function(){ 
                $(".popup-modal").modal("openModal");
            });
        }
    );
    
</script>

HTML

<a href="#" class="click-me">Click Me Please</a>

<div class="popup-modal">    
    <?php echo $block->getProductPrice($_item); ?> 
    <?php echo $block->escapeHtml($_item->getShortDescription()) ?>
</div>

For all purposes the text is being output for each div (I can see in the source code that each one has different content in), but only the first div (out of 3) is being loaded when the link is clicked

Any help since my Javascript/Jquery knowledge is not the greatest

Can you link to an example of this not working?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.