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.