I am facing an issue from past week without any solution.

I have a admin dashboard. Links are in left and when clicked on link the data loads in iframe in main content part.

Each data that loads in iframe has its own jquery function.

When everytime I click on link, the content changes but its jquery function is not removed.

For example, suppose I click on Create Invoice link. The form opens with its jquery function. Now again when I click on another link, this new page again opens with its own jquery function.
Now jquery of Invoice link does not allow second page jquery to work.
Because of this my pages are having conflict and function does not work as intended.

[dashboard image](https://i.stack.imgur.com/wtbyR.png)

Here is an example,

I am using [selectize.js](https://selectize.github.io/selectize.js/)
I use it to provide search on select inputs.
Now I use this on one page and do not use on another page.

But it loads search function on all pages.

```
<script>
$(document).ready( function() {
    $("#select").selectize({
    selectOnTab: true,
    openOnFocus: false
    });
});
</script>

```

Here is my code to load each function in its own I frame.

```
<li class="item-group"><a id="ajaxid" href="{% url "createinvoice" %}" target="blank"><i class="material-icons">content_paste</i> Create Invoice</a></li>
          <li class="item-group"><a id="ajaxid" href="{% url "createdc" %}" target="blank"><i class="material-icons">content_paste</i> Create DC</a></li>
          <li class="item-group"><a id="ajaxid" href="{% url "createbos" %}" target="blank"><i class="material-icons">content_paste</i> Create BOS</a></li>

<script>
$("a[id=ajaxid]").on('click', function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("#magicid").load(target);

});
</script>

```