Load javascript file more than once doesn't work

Question

I'm trying to load content from html pages in my index page depends on menu clicks. every html page (component) contains it's less file and it's js file. Now when I click on menu item it loads and runs both less & js files perfectly in the first time but in the 2nd time it only loads the files but doesn't run them.

how html page (component) looks like:

<link rel="stylesheet/less" href="/path/to/styles.less">
<div id="print_items">
  <h1>Print items</h1>
</div>
<script type="module" src="/path/to/script.js"></script>

I'm using this line to load the html page above inside index.php

$('#main_content').load('/path/to/html/page');

Now when I write the script inside HTML like this it works:

<link rel="stylesheet/less" href="/path/to/styles.less">
<div id="print_items">

</div>
<script >
  console.log('print items has been loaded');
</script>

Answer 1

don't load script tag dynamically instead use single js file and make function to invoke by making click event

single js file

app.js

let print=()=>{
console.log('print') //do your stuff each function by clicking

}

let categiries=()=>{

console.log('category') //do your stuff each function by clicking
}

Tips:script dynamically loading not a good idea or load all script at once make a function for each click event.