How to deal with multiple scripts in a single page web application

How to deal with multiple scripts in a single page web application

Am new to Web development and i started an application where i have index.php with a menu and a div called #content and i load all the different pages in to the div #content using load(); I need to load the respective java script files along with the files that are being loaded in to the div #content.


Issue: Here in the HTML's that is loaded in to the div, i have some similar class names and id's so when i click on any menu item and perform some action there and go to another menu item and perform same action i get the script of previous menu item is being executed!


Is there a better way to load scripts into the div on the menu item click and on click of another menu item remove the previous scripts and load a fresh scripts from the current menu item clicked?

Script i use to load the div #content:

  1. $('.nav-button').on('click', function(e){
    e
    .preventDefault();
    $
    ('#content').load('../scripts/loader.php');
    $
    ('#content').load($(this).attr('href'));
    });

sample1.php page i load in to the div on menu-item1 clicked:

  1. <div id='datagrid'>
    <input></input>
    <input></input>
    <input></input>
    </div>
    <script type='text/javascript' src='scripts/menu-item1/data_script.js'></script>

sample2.php page i load in to the div on menu-item2 clicked:

  1. <div id='datagrid'>
    <input></input>
    <input></input>
    <input></input>
    </div>
    <script type='text/javascript' src='scripts/menu-item2/data_script.js'></script>