A Custom module that uses a JavaScript script breaks functionality

Question

I have created a custom module that is simply a link that shows a modal with a picture on it. I have connected the module with an attribute and the module works for that specific product attribute. However in the rest of the products, I get an error in Google Inspector, plus the functionality breaks (i.e. Product image not loading and cart content is not visible).

Any ideas? Thank you in advance

The template code:

Vendor/Module/view/frontend/templates/catalog/product/view/addto.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View*/
?>

<?php
$product = $block->getProduct();
?>

<?php if( $product->getData('size_chart') ): ?>

<?php
$sc = $product->getData('size_chart');
$sc = 'Vendor_Module::documents/' . $sc . '?iframe=true';
?>

<a id="click-me" href="#" class="action open-modal-form mailto friend feature feature-icon-hover">
<span class="icon ib ib-hover ic ic-tshirt icon-color-productview"></span>
        <span class="label"><p class="text">Size Chart</p></span></a>


<div id="popup-modal" style="display:none;">
    <img src="<?php echo $this->getViewFileUrl($sc); ?>"/>
</div>

<?php endif; ?>

<div class="product-addto-links" data-role="add-to-links">
    <?= $block->getChildHtml() ?>
</div>

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

            var popup = modal(options, $('#popup-modal'));

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

And the error that I inspect in Google:

jquery.js:3762 Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at acceptData (jquery.js:3762)
    at internalData (jquery.js:3830)
    at Function.data (jquery.js:4031)
    at $.(anonymous function).(anonymous function)._createWidget (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:545:6)
    at new $.(anonymous function).(anonymous function) (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:363:9)
    at $.(anonymous function).(anonymous function) (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:357:11)
    at joust-duffle-bag:1516
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)

Answer 1

I simply put the js script inside the if clause.