Multiple Modal Popups on same page

Question

I have a 2 links on the product page which both need the modal popup component attaching to them, I have 1 working fine but If I try to add the same script for the 2nd one they both stop working

This is what I have for the first link:

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: false,
            innerScroll: true,
            buttons: []
        };

        var popup = modal(options, $('#finance-info'));
        $("#finance-popup").on('click',function(){ 
            $("#finance-info").modal("openModal");
        });

    }
);

For the second link I have:

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: false,
            innerScroll: true,
            buttons: []
        };

        var popup = modal(options, $('#information-mpdal'));
        $("#request-more").on('click',function(){ 
            $("#information-mpdal").modal("openModal");
        });

    }
);

Both of these scripts are in a custom.js file. Is it possible to have 2 modal popups on the same page?

Answer 1

I've fixed this, I didn't need to create 2 separate require.js calls for each modal, I just needed to create 2 variables in 1 call like this:

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function (
            $,
            modal
        ) {
            var modaloption = {
                type: 'popup',
                responsive: false,
                innerScroll: true,
                clickableOverlay: true,
                buttons: []
        };
        var popup = modal(options, $('#information-mpdal'));
        $("#request-more").on('click',function(){ 
            $("#information-mpdal").modal("openModal");
        });
        var popup = modal(options, $('#information-mpdal2'));
        $("#request-more2").on('click',function(){ 
            $("#information-mpdal2").modal("openModal");
        });
    }
);
</script>

Answer 2

This should be ok, there's no limit on modals per page and you're using distinct elements for each one.

I notice one of your modals has the node $('#information-mpdal'), is that a typo? It could explain "Cannot read property 'nodeName' of undefined" you mention in the comments.