Conflict between jQuery and another js

Question

I added this following script to my html without any problem:

<link href="multiselect.css" rel="stylesheet"/>
<script src="multiselect.min.js"></script>

...

<script>
    document.multiselect('#selection');     
</script>

However, as soon as I include this following jQuery, it is said that document.multiselect is not a function :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="multiselect.css" rel="stylesheet"/>
<script src="multiselect.min.js"></script>

Why there would be such a conflict? How should I resolve?

Answer 1

Add the jQuery line at the very end of your header, which will solve the issue:

<link href="multiselect.css" rel="stylesheet"/>
<script src="multiselect.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>